SVG - oddzielenie struktury i prezentacji
W tym paragrafie przedstawię spojrzenie na oddzielenie struktury dokumentu od jego wizualnej prezentacji. Możemy tego dokonać przy użyciu stylów.
Poniższy przykład pokazuje użycie stylu lokalnego.
<circle cx="20" cy="20" r="10" style="stroke: blue; stroke-width: 1.6; fill: blue; fill-opacity: 0.6" />Wewnętrzny arkusz stylów:
<svg>
<defs>
<style type="text/css"><![CDATA[
circle {
fill: #ffc;
stroke: red;
stroke-width: 2;
stroke-dasharray: 5 3
}
]]></style>
</defs>
<circle cx="20" cy="20" r="10"/>
<circle cx="60" cy="20" r="15"/>
<circle cx="20" cy="60" r="10" style="fill: #cfc"/>
<circle cx="60" cy="60" r="15" style="stroke-width: 1; stroke-dasharray: none;"/>
</svg>
Zastosowanie zewnętrznego arkusza stylów:Jeśli chcesz użyć tego samego arkusza stylów do wielu dokumentów SVG najlepiej wtedy użyć zewnętrznego arkusza stylów. Przykładowy zewnętrzny arkusz stylów jest pokazany poniżej. Nadajmy mu nazwę np. ext_style.css.
* { fill:none; stroke: black; } /* default for all elements */
rect { stroke-dasharray: 7 3; }
circle.yellow { fill: yellow; }
.thick { stroke-width: 5; }
.semiblue { fill: blue; fill-opacity: 0.5; }
A to przykładowy document SVG wykorzystujący ten arkusz stylów.
Jak widzimy odwołanie do arkusza odbywa się poprzez linijkę <?xml-stylesheet ...?>.
<?xml version="1.0"?>
<?xml-stylesheet href="ext_style.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="200px" height="200px">
<line x1="10" y1="10" x2="40" y2="10"/>
<rect x="10" y="20" width="40" height="30"/>
<circle class="yellow" cx="70" cy="20" r="10"/>
<polygon class="thick" points="60 50, 60 80, 90 80"/>
<polygon class="thick semiblue"
points="100 30, 150 30, 150 50, 130 50"/>
</svg>