从另一个SVG引用SVG定义

我对SVG使用元素有一个问题。让我们从示例中理解

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>

<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>

从上面的svg中，我想引用另一个svg文件中的符号

SVG2.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>

<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在Mozilla中运行良好，但在IE9和Chrome中不起作用。

---

IE9和Chrome是否支持引用其他svg中的符号，或者我的代码中是否有错误？

请从链接中删除[Svg1.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="#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>

几个问题：文件是在Web服务器上还是在本地文件系统上，如果是Web服务器，它们是在同一个域上？如果它们不在同一个域Web服务器上，则文件访问限制可能是一个问题。控制台上是否有错误？这两个文件都在本地文件系统中。听起来像。@ErikDahlström如果是最新的Chrome，则应使用图形。好的，只是样式定义没有从外部文件正确复制过来（-除了Chrome 34上的径向渐变颜色之外，我得到了所有信息）。如果OP没有看到任何东西，我的第一个猜测仍然是本地文件访问限制。SubbuS:控制台上有任何错误吗？没有，我没有任何错误。