• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

The use Element

It is common for a graphic to have many similar shapes within it. One example is a rectangular grid, which consists simply of multiple horizontal and vertical lines. In SVG each of those lines could be created by using multiple individual line elements. An alternative approach is to define line elements within a defs element and then reference those line elements by using use elements. Listing 2.12 shows an example.

Listing 2.12. UseExample.svg—An Example of Reusing Graphic Shapes Using use Elements

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="600px" height="400px">
    <title>Demonstrating the use element</title>
    <defs>
        <line id="horiz" x1="20px" y1="30px" x2="420px" y2="30px"
         style="stroke:red; stroke-width:5px; stroke-dasharray:3,3;
         fill:none;"/>
        <line id="vert" x1="20px" y1="30px" x2="20px" y2="330px"
         style="stroke:red; stroke-width:5px; stroke-dasharray:1,9,3;
         fill:none;"/>
    </defs>
<!-- Horizontal lines -->
    <use xlink:href="#horiz" />
    <g transform="translate(0,100)">
        <use xlink:href="#horiz" />
    </g>
    <g transform="translate(0,200)">
        <use xlink:href="#horiz"  />
    </g>
    <g transform="translate(0,300)">
        <use xlink:href="#horiz"  />
    </g>
<!-- Vertical lines -->
    <use xlink:href="#vert" />
    <g transform="translate(100,0)">
        <use xlink:href="#vert" />
    </g>
    <g transform="translate(200,0)">
        <use xlink:href="#vert" />
    </g>
    <g transform="translate(300,0)">
        <use xlink:href="#vert" />
    </g>
    <g transform="translate(400,0)">
        <use xlink:href="#vert" />
    </g>
</svg>


					  


PREVIEW

                                                                          

Not a subscriber?

Start A Free Trial


  
  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint