Module:Svg/doc
Jump to navigation
Jump to search
[edit source]
[edit source]
 | This is a documentation subpage for Module:Svg. It may contain usage information, categories and other content that is not part of the original module page. |
General usage
[edit source]- General syntax
{{#invoke:svg|function_name}}
create
[edit source]- Brief
- Create an SVG object
- Syntax
{{#invoke:svg|create|content=...|...<nowiki>}}
This function shows SVG images built from source. It is also able to display SVG animations (see below).
Supported arguments are |content=, |link=, |width=, |height=, |class=, |id=, |alt=, |title=, |style= and custom arguments starting with the hash sign (#) which will be used as attributes for the nested <svg>...</svg> element. Arguments that do not begin with the hash sign are discarded when empty (therefore writing |style= is identical to omitting the argument).
Examples
[edit source]Wikitext:
{{#invoke:svg|create|content=<circle cx="50" cy="50" r="45" style="fill:green;" />}}
Effect:
Wikitext (from SVG animation using SMIL.svg):
{{#invoke:svg|create
| 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:
{{#invoke:svg|create
| 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:
Example with frame
[edit source] 
{{Image frame
| style = width: 200px;
| caption = Example with frame – see {{Tl|Image frame}}.
| link = Hello world
| align = right
| content = {{#invoke:svg|create
| width = 200px
| alt = Orbit animation
| link = Orbit
| #width = 160
| #height = 160
| #viewBox = 0 0 160 160
| content =
<rect fill="#209cef" x="0" y="0" width="160" height="160" />
<circle cx="80" cy="80" r="50" />
<g transform=" matrix(0.866, -0.5, 0.25, 0.433, 80, 80)">
<path d="M 0,70 A 65,70 0 0,0 65,0 5,5 0 0,1 75,0 75,70 0 0,1 0,70Z" fill="#fff">
<animateTransform attributeName="transform" type="rotate" from="360 0 0" to="0 0 0" dur="1s" repeatCount="indefinite" />
</path>
</g>
<path d="M 50,0 A 50,50 0 0,0 -50,0Z" transform="matrix(0.866, -0.5, 0.5, 0.866, 80, 80)" />
}}
}}
create_from_caller
[edit source]- Brief
- Create an SVG object using the incoming parameters of the calling template as arguments
- Syntax
{{#invoke:svg|create_from_caller}}
This function is identical to create, but instead of accepting arguments uses the calling template's incoming parameters. It is mainly intended to be used by the {{Show SVG}} template.
