HTML and CSS Reference
In-Depth Information
ers require multiple points plotted out on a Cartesian graph. Each shape accepts attributes
for fill, stroke colors/width, and even gradients. Table7.2 offers an overview on how to use
these tags.
Table 7.2. Shapes you can create with SVG and corresponding examples
Formatting example
<rect x="5" y="20" width="80" height="20" fill="#c00" />
<circle cx="130" cy="43" r="20" fill="black" stroke="#aaa" stroke-width="5" />
<ellipse cx="45" cy="130" rx="40" ry="20" fill="#00f" />
<line x1="110" x2="160" y1="110" y2="150" fill="#000" />
<polyline points="5 200 20 220 30 230 40 210 50 240 60 200 80 210 90 190 60 300 5 200"
fill="transparent" stroke="orange" stroke-width="5" />
<polygon points="110 200 110 240 130 280 150 240 150 200" stroke="#0f0" fill="#000" stroke-
width="5" />
You can combine XML tags from table 7.2 into a group as follows: <g>content</g> .
Think of groups as <div> s for storing complex shape creations. You can easily target
groups with JavaScript and CSS selectors instead of individually selecting every element
inside. Create your first group and a gradient by integrating the following listing inside
your <svg> tag.
Search WWH ::

Custom Search