<svg-container>
Use the <svg-container>
element to store content that
contributes to a scalable vector graphic (SVG). Such content includes SVG elements, references
to SVG elements that are stored in separate, non-DITA documents, <data>
,
or <data-about>
elements.
The SVG markup must have a root element of <svg>
with the SVG
namespace: "http://www.w3.org/2000/svg".
Content models
See appendix for information about this element in OASIS document type shells.
Inheritance
+ topic/foreign svg-d/svg-container
Example
In the following example, an <svg-container>
element contains inline
SVG markup:
<topic id="svg-test-topic-01"> <title>SVG Domain Test: Namespace Prefixed SVG Elements</title> <body> <p>SVG inline: <svg-container> <svg:svg width="100" height="100"> <svg:defs> <svg:filter id="f1" x="0" y="0"> <svg:feGaussianBlur in="SourceGraphic" stdDeviation="15"/> </svg:filter> </svg:defs> <svg:rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)"/> </svg:svg> </svg-container></p> <p>SVG Directly in body:</p> <svg-container> <svg:svg width="200" height="200"> <svg:ellipse cx="100" cy="100" rx="80" ry="80" style="fill:blue; stroke:rgb(0,0,100);stroke-width:2"/> </svg:svg> </svg-container> <fig> <title>Figure With SVG Container</title> <svg-container> <svg:svg width="4in" height="6in" version="1.1" > <svg:circle cx="150" cy="200" r="100" fill="url(#grad_blue)" > <svg:animate attributeName="r" begin="Go.click" end="Stop.click" dur="4s" values="100; 0; 100" repeatCount="indefinite"/> </svg:circle> <svg:radialGradient id="grad_blue" cx="20%" cy="20%" r="100%" fx="30%" fy="30%"> <svg:stop stop-color="white" offset="0"/> <svg:stop stop-color="blue" offset="25%"/> <svg:stop stop-color="rgb(0,0,192)" offset="50%"/> <svg:stop stop-color="rgb(0,0,127)" offset="70%"/> <svg:stop stop-color="rgb(0,0,64)" offset="85%"/> <svg:stop stop-color="rgb(0,0,0)" offset="100%"/> </svg:radialGradient> <svg:g id="Go"> <svg:rect x="70" y="320" height="40" width="80" fill="aqua"/> <svg:text x="90" y="350" font-size="30" fill="green">Go </svg:text> </svg:g> <svg:g id="Stop"> <svg:rect x="160" y="320" height="40" width="80" fill="aqua"/> <svg:text x="170" y="350" font-size="30" fill="red">Stop</svg:text> </svg:g> </svg:svg> </svg-container> </fig> </body> </topic>
In the following example, the
<svgref>
element uses the
@keyref
attribute to address SVG markup that is stored in a separate,
non-DITA
document:<fig> <title>Figure with SVG Container</title> <svg-container> <svgref keyref="svg-fragment-01"/> </svg-container> </fig>
The key "svg-fragment-01" is declared in the following
way:
<map> ... <keydef keys="svg-fragment-01" href="media/svg/svg-library.xml#frag-0001" format="svg" /> ... </map>
Attributes
The following attributes are available on this element: Universal attribute group and outputclass.