Co potrafi SVG?
Dariusz Biedrzycki
Darusz Biedrzycki
Dariusz Biedrzycki
<svg width="190" height="190">
<circle
cx="95" cy="95"
r="70"
style="stroke: black; fill: none"
/>
</svg>
<svg width="190" height="190">
<circle
cx="95" cy="95"
r="70"
style="stroke: black; fill: none"
/>
</svg>
<svg width="190" height="190">
<circle
cx="95" cy="95"
r="70"
style="stroke: black; fill: none"
/>
</svg>
<svg width="190" height="190">
<circle cx="95" cy="95" r="70"
style="
stroke: red;
fill: red
"
/>
</svg>
<svg width="190" height="190">
<circle cx="95" cy="95" r="70"
style="
stroke: red;
fill: none
"
/>
</svg>
<svg width="190" height="190">
<circle cx="95" cy="95" r="70"
style="
stroke: black;
stroke-width: 20;
fill: none
"
/>
</svg>
<svg width="190" height="190">
<circle cx="95" cy="95" r="70"
style="
stroke: black;
stroke-width: 20;
stroke-opacity: 0.3
fill: none
"
/>
</svg>
<svg width="190" height="190">
<circle cx="95" cy="95" r="70"
style="
stroke: black;
fill: none;
stroke-dasharray: 15 35
"
/>
</svg>
<svg width="190" height="190">
<circle cx="95" cy="95" r="70"
style="
stroke: black;
fill: none;
stroke-dasharray: 439
"
/>
</svg>
<svg width="190" height="190">
<circle cx="95" cy="95" r="70"
style="
stroke: black;
fill: none;
stroke-dasharray: 439;
stroke-dashoffset: 219;
"
/>
</svg>
<svg width="190" height="190">
<circle cx="95" cy="95" r="70"
style="
stroke: black;
fill: #eee;
stroke-dasharray: 439;
stroke-dashoffset: 219;
"
/>
</svg>
<svg width="190" height="190">
<def><style type="text/css">
.c1 {
stroke-dashoffset: 439;
-webkit-animation: rysuj 3s linear forwards;
}
@-webkit-keyframes rysuj {to{stroke-dashoffset: 0;}}
</style></def>
<circle class="c1" cx="95" cy="95" r="70" style="stroke: black;
fill: none; stroke-dasharray: 439;" />
</svg>
See the Pen Animated signing of signature (SVG paths) by Gary Hepting (@ghepting) on CodePen.
<svg width="190" height="190">
<path d="
M 25 55
Q 15,15 55,25
L 55,25 25,55"
style="stroke: black; fill: none;/>
</svg>
<svg width="190" height="190">
<path d="
M 25 55
Q 15,15 55,25
L 55,25 25,55"
style="stroke: black; fill: none;/>
</svg>
<svg width="190" height="190">
<path d="
M 25 55
Q 15,15 55,25
L 55,25 25,55"
style="stroke: black; fill: none;/>
</svg>
<svg width="190" height="190">
<def>
<path id="p1" d="M25,55Q15,15,55,25Z"
style="stroke:black; fill:none;" />
</def>
<use xlink:href="#p1" />
<use xlink:href="#p1"
transform="rotate(90,20,20) translate(0,-150)" />
</svg>
<svg width="800" height="800" viewBox="0 0 800 600">
<g id="parrot" transform="rotate(45)"> ... </g>
</svg>
<svg width="800" height="800" viewBox="0 0 800 600">
<g id="parrot" transform="translate(150 200)"> ... </g>
</svg>
<svg width="800" height="800" viewBox="0 0 800 600">
<g id="parrot" transform="scale(2)"> ... </g>
</svg>
<svg width="800" height="800" viewBox="0 0 800 600">
<g id="parrot" transform="skewX(25)"> ... </g>
</svg>
<svg width="800" height="800" viewBox="0 0 600 450" >
...
</svg>
<svg width="190" height="190">
<def>
<path id="p1" d="M25,55Q15,15,55,25Z"
style="stroke:black; fill:none;" />
</def>
<use xlink:href="#p1" />
<use xlink:href="#p1"
transform="rotate(90,20,20) translate(0,-150)" />
<circle cx="95" cy="95" r="70" style="stroke: black;/>
</svg>
<svg width="190" height="190">
<def>
<path id="p1" ... />
</def>
<use xlink:href="#p1" />
<use xlink:href="#p1" transform="rot... />
<line
x1="25" y1="165"
x2="45" y2="145"
style="stroke: black;" />
</svg>
<svg width="190" height="190">
<def>
<path id="p1" ... />
</def>
<use xlink:href="#p1" />
<use xlink:href="#p1" transform="rot... />
<line
x1="25" y1="165"
x2="45" y2="145"
style="stroke: black;" />
</svg>
<svg width="190" height="190">
<def>
<path id="p1" ... />
</def>
<g id="z" style="stroke-width:5; stroke: black;" >
<use xlink:href="#p1" />
<use xlink:href="#p1" transform="rot... />
<line x1="25" y1="165" x2="45" y2="145" />
<line x1="165" y1="165" x2="145" y2="145" />
</g>
</svg>
<svg width="190" height="190">
<def>
<path id="p1" ... />
</def>
<g id="z" style="stroke-width:5; stroke: black;
stroke-linecap: round;" >
...
</g>
<rect id="hour-hand" x="91" y="25" width="8" height="50" />
</svg>
<svg width="190" height="190">
<def>
<path id="p1" ... />
</def>
<g id="z" style="stroke-width:5; stroke: black;
stroke-linecap: round;" > ... </g>
<rect id="hour-hand" ... rx="5" ry="5"/>
<rect id="minute-hand" ... rx="5" ry="5" />
<rect id="second-hand" ... style="stroke:red;" />
</svg>
<rect id="second-hand" ... >
<animateTransform
attributeName="transform"
type="rotate"
from="0 95 95"
to="360 95 95"
dur="60s"
repeatCount="indefinite"
/>
</rect>
<rect id="second-hand" ... >
<animateTransform
attributeName="transform"
type="rotate"
from="0 95 95"
to="360 95 95"
dur="60s"
repeatCount="indefinite"
/>
</rect>
<rect id="second-hand" ... >
<animateTransform
attributeName="transform"
type="rotate"
from="0 95 95"
to="360 95 95"
dur="60s"
repeatCount="indefinite"
/>
</rect>
<rect id="second-hand" ... >
<animateTransform
attributeName="transform"
type="rotate"
from="0 95 95"
to="360 95 95"
dur="60s"
repeatCount="indefinite"
/>
</rect>
<rect id="second-hand" ... >
<animateTransform
attributeName="transform"
type="rotate"
from="0 95 95"
to="360 95 95"
dur="60s"
repeatCount="indefinite"
/>
</rect>
<rect id="second-hand" ... >
<animateTransform
attributeName="transform"
type="rotate"
from="0 95 95"
to="360 95 95"
dur="60s"
repeatCount="indefinite"
/>
</rect>
<rect id="second-hand" ... >
<animateTransform ... additive="sum"/>
</rect>
<script type="text/javascript">
...
</script>
<script type="text/javascript">
var date = new Date,
MINUTE = 60,
HOUR = 60*MINUTE,
seconds = date.getSeconds(),
minutes = date.getMinutes(),
hours = date.getHours();
minutes = (minutes * MINUTE) + seconds;
hours = (hours * HOUR) + minutes;
...
</script>
<script type="text/javascript">
...
document
.getElementById('second-hand')
.setAttribute(
'transform',
'rotate('+360*(seconds/MINUTE)+' 95 95)'
);
</script>
http://sarasoueidan.com/blog/svg-transformations/
Dziękuję za uwagę