0

I have a problem with SVG Use Element.Lets understand from example

Svg1.svg

<?xml version="1.0"?>
  <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
    "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
  <svg width="400" height="200" xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <polygon id="lens" points="65,50 185,50 185,75, 150,100 100,100 65,75"
       fill="none" stroke="purple" stroke-width="4"/>
       <radialGradient id="irisGradient">
        <stop offset="25%" stop-color="green" />
        <stop offset="100%" stop-color="dodgerblue" />
       </radialGradient>
       <g id="eye">
         <ellipse cy="50" rx="50" ry="25" fill="none" stroke="black"/>
         <circle cy="50" r="25"/>
         <circle cy="50" r="10" fill="black"/>
      </g>
    </defs>
  </svg>

From the above svg I want to refer symbol in another SVG File

SVG2.svg

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <g>
     <use xlink:href="Svg1.svg#eye" x="125" fill="url(Svg1.svg#irisGradient)"/>
     <use xlink:href="Svg1.svg#eye" x="250" fill="dodgerblue"/>
     <use xlink:href="Svg1.svg#lens"/>
     <use xlink:href="Svg1.svg#lens" x="125"/>
     <line x1="65" y1="50" x2="310" y2="50"
          stroke="plum" stroke-width="2"/>
  </g>
</svg>

SVG2.svg is working fine in Mozilla but in IE9 and Chrome it is not working. Do IE9 and Chrome support referencing symbols from another svg, or is there something wrong in my code?

5
  • A couple questions: Are the files on a webserver or on a local file-system, and if a webserver are they on the same domain? If they aren't both on the same domain webserver, file access restrictions could be a problem. Are you getting any errors on the console?
    – AmeliaBR
    Apr 27, 2014 at 15:32
  • Both the files are in Local file system.
    – SubbuS
    Apr 28, 2014 at 6:17
  • Sounds like crbug.com/229081. Apr 28, 2014 at 11:55
  • @ErikDahlström If it's the latest Chrome, the graphics should be used ok, it's only the style definitions that don't get properly copied over from the external file (see test file -- I'm getting everything except the colour of the radial gradient correct on Chrome 34). If the OP isn't seeing anything, my first guess is still local file access restrictions. SubbuS: are you getting any errors on the console?
    – AmeliaBR
    Apr 28, 2014 at 15:31
  • No i didn't get any errors.
    – SubbuS
    Apr 29, 2014 at 10:27

1 Answer 1

0

please remove [Svg1.svg] from links

<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <g>
        <use xlink:href="#eye" x="125" fill="url(#irisGradient)"/>
        <use xlink:href="#eye" x="250" fill="dodgerblue"/>
        <use xlink:href="#lens"/>
        <use xlink:href="#lens" x="125"/>
        <line x1="65" y1="50" x2="310" y2="50" stroke="plum" stroke-width="2"/>
    </g>
</svg>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.