Formula:SVG/doc
 |
Haec est subpagina documentationis de "Formula:SVG". Haec subpagina informationes categoriasque et alias res continet quae in pagina principali respectiva non continentur. |
Hanc paginam, in spatio Formulae nominali, oportet Latine convertere. |
Haec formula Lua utitur: |
This template shows SVG images built from source. It is also able to display SVG animations (see below).
De usu
[fontem recensere]Supported parameters are |content=, |link=, |width=, |height=, |class=, |id=, |alt=, |title=, |style= and custom parameters starting with the hash sign (#) which will be used as attributes for the nested <svg>...</svg> element.
Examples
[fontem recensere]Wikitext:
{{SVG|content=<circle cx="50" cy="50" r="45" style="fill:green;" />}}
Effect:
Wikitext (from SVG animation using SMIL.svg):
{{SVG
| link = SVG animation
| width = 200px
| alt = SVG animation using SMIL
| #width = 100%
| #height = 100%
| #viewBox = -4 -4 8 8
| #xmlns:xlink = http://www.w3.org/1999/xlink
| content =
<title>SVG animation using SMIL</title>
<circle cx="0" cy="1" r="2" stroke="red" fill="none">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="1s" repeatCount="indefinite" />
</circle>
}}
Effect:
Wikitext (from Animated clock.svg):
{{SVG
| width = 400px
| alt = SVG image
| #width = 800
| #height = 800
| #viewBox = 0 0 800 800
| #xmlns:xlink = http://www.w3.org/1999/xlink
| content =
<defs>
<animateTransform type="rotate" fill="remove" restart="always" calcMode="linear" accumulate="none" additive="sum" xlink:href="#anim-clock-hour-hand" repeatCount="indefinite" dur="43200s" to="360 400 400" from="0 400 400" attributeName="transform" attributeType="xml"></animateTransform>
<animateTransform type="rotate" fill="remove" restart="always" calcMode="linear" accumulate="none" additive="sum" xlink:href="#anim-clock-minute-hand" repeatCount="indefinite" dur="3600s" to="360 400 400" from="0 400 400" attributeName="transform" attributeType="xml"></animateTransform>
<animateTransform type="rotate" fill="remove" restart="always" calcMode="linear" accumulate="none" additive="sum" xlink:href="#anim-clock-second-hand" repeatCount="indefinite" dur="60s" to="360 400 400" from="0 400 400" attributeName="transform" attributeType="xml"></animateTransform>
</defs>
<circle cx="400" cy="400" r="400" fill="#fff"/>
<use transform="matrix(-1,0,0,1,800,0)" xlink:href="#one-half"/>
<g id="one-half">
<g id="one-fourth">
<path d="m400 40v107" stroke="#000" stroke-width="26.7"/>
<g id="one-twelfth">
<path d="m580 88.233-42.5 73.612" stroke="#000" stroke-width="26.7"/>
<g id="one-thirtieth">
<path id="one-sixtieth" d="m437.63 41.974-3.6585 34.808" stroke="#000" stroke-width="13.6" />
<use transform="rotate(6 400 400)" xlink:href="#one-sixtieth"/>
</g>
<use transform="rotate(12 400 400)" xlink:href="#one-thirtieth"/>
</g>
<use transform="rotate(30 400 400)" xlink:href="#one-twelfth"/>
<use transform="rotate(60 400 400)" xlink:href="#one-twelfth"/>
</g>
<use transform="rotate(90 400 400)" xlink:href="#one-fourth"/>
</g>
<path class="clock-hour-hand" id="anim-clock-hour-hand" d="m 381.925,476 h 36.15 l 5e-4,-300.03008 L 400,156.25 381.9245,175.96992 Z" transform="rotate(110.2650694444, 400, 400)" />
<path class="clock-minute-hand" id="anim-clock-minute-hand" d="M 412.063,496.87456 H 387.937 L 385.249,65.68306 400,52.75 414.751,65.68306 Z" transform="rotate(243.1808333333, 400, 400)" />
<path class="clock-second-hand" id="anim-clock-second-hand" fill="#a40000" d="M 397.317,63.51744 395.91962,168.4 C 374.575,170.5125 358.2,188.365 358.2,210 c 0,21.635 16.3,39 36.61214,41.47594 L 391.52847,498 h 16.94306 L 405.1868,251.47593 C 425.5,249 441.8,231.635 441.8,210 c 2e-5,-21.635 -16.375,-39.4875 -37.71971,-41.6 L 402.683,63.51744 400,60 Z M 400,190.534 c 10.888,0 19.466,8.866 19.466,19.466 0,10.6 -8.578,19.466 -19.466,19.466 -10.888,0 -19.466,-8.866 -19.466,-19.466 0,-10.6 8.578,-19.466 19.466,-19.466 z" transform="rotate(190.85, 400, 400)" />
}}
Effect:
