HTML and CSS Reference
In-Depth Information
Look what happens if you use these val-
ues: viewBox="0 0 640 480" . It's the same
SVG graphic as before, but rendered into
a larger viewport.
Applying styles to SVG
The previous examples used an inline
style to apply colors and stroke thick-
nesses. Those properties can also be applied directly to the elements in
question, like this:
<rect x="50" y="50" width="100" height="100"
<line x1="50" y1="50" x2="150" y2="150"
stroke="rgb(0,127,127)" stroke-width="5"></line>
But you can alternatively leave off the style and inline attributes and
use this in your CSS file, and achieve the same results:
rect { fill: rgb(255,0,0); }
line { stroke: rgb(0,127,127); stroke-width: 5; }
It looks much like any other CSS ,
albeit with some unusual properties.
As with regular HTML , CSS can
make life much easier if you have a
lot of similar objects because you can
use a class to apply a set of styles to
several elements.
In this example there are three green
squares (upper left, upper right,
lower left) and three blue squares. Rather than specify inline styles on
each one, you can declare their commonality with the class attribute:
<svg id="mysvg" viewBox="0 0 320 240">
<rect x="50" y="50" width="50" height="50" class="earth"></rect>
<rect x="150" y="50" width="50" height="50" class="water"></rect>
<rect x="250" y="50" width="50" height="50" class="earth"></rect>
<rect x="50" y="150" width="50" height="50" class="earth"></rect>
Search WWH ::

Custom Search