Repeat Image

sana2009fall
sana2009fall used Ask the Experts™
on
Hi,

I have drawn a star using Path attribute and would like to repeat it in the page. I am wondering how to go about it??
I am attching the SVG code which i have created. It has one star. I want it to be clustered and shown in some pattern for multiple stars.

<?xml version="1.0" standalone="no"?>
<!--Created with Sketsa SVG Editor (http://www.kiyut.com)-->
<svg contentScriptType="text/ecmascript" width="600.0px" xmlns:xlink="http://www.w3.org/1999/xlink"
    baseProfile="full" zoomAndPan="magnify" contentStyleType="text/css" height="600.0px"
    preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" version="1.0">
    <path stroke-linecap="round" display="block" fill="#FFCC00" stroke-linejoin="round"
d="M 171.42856,409.50504 L 156.18198,404.33477 L 143.27931,
     413.96344 L 143.48508,397.86538 L 130.34052,388.56964 L 145.71428,383.79075 L 150.49316,368.417 L 159.7889,
     381.56155 L 175.88697,381.35579 L 166.2583,394.25845 L 171.42856,409.50504 z" stroke="#4440e4"/>
</svg>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
1. Put the path in a defs section.
2. Assign the path an id.
3. Apply a transform to the path so that its origin is (0,0) (normally you would create the SVG path at (0,0) so you don't need the transform).
4. Add "use" elements to the SVG file to display the star multiple times at different positions.
<?xml version="1.0" standalone="no"?>
<!--Created with Sketsa SVG Editor (http://www.kiyut.com)-->
<svg contentScriptType="text/ecmascript" width="600.0px" xmlns:xlink="http://www.w3.org/1999/xlink" baseProfile="full" zoomAndPan="magnify" 
   contentStyleType="text/css" height="600.0px" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" version="1.0">
   <defs>
      <path id="pathStar" stroke-linecap="round" display="block" fill="#FFCC00" stroke-linejoin="round" stroke="#4440e4" transform="translate(-130,-368)"
         d="M 171.42856,409.50504 L 156.18198,404.33477 L 143.27931, 413.96344 L 143.48508,397.86538 L 130.34052,388.56964 L 145.71428,383.79075 
            L 150.49316,368.417 L 159.7889,381.56155 L 175.88697,381.35579 L 166.2583,394.25845 L 171.42856,409.50504 z"/>
   </defs>
   <use x="100" y="100" xlink:href="#pathStar"/>
   <use x="200" y="100" xlink:href="#pathStar"/>
   <use x="300" y="100" xlink:href="#pathStar"/>
   <use x="100" y="200" xlink:href="#pathStar"/>
   <use x="200" y="200" xlink:href="#pathStar"/>
   <use x="300" y="200" xlink:href="#pathStar"/>
   <use x="100" y="300" xlink:href="#pathStar"/>
   <use x="200" y="300" xlink:href="#pathStar"/>
   <use x="300" y="300" xlink:href="#pathStar"/>
</svg>

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial