参考另一个 SVG 的 SVG 定义答案

【问题标题】：Refer SVG Definition From Another SVG参考另一个 SVG 的 SVG 定义
【发布时间】：2019-04-04 12:42:29
【问题描述】：

我对 SVG 使用 Element 有问题。让我们从例子中理解

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 我想在另一个 SVG 文件中引用符号

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 在 Mozilla 中运行良好，但在 IE9 和 Chrome 中无法运行。 IE9 和 Chrome 是否支持从另一个 svg 引用符号，还是我的代码有问题？

【问题讨论】：

几个问题：文件是在网络服务器上还是在本地文件系统上，如果是网络服务器，它们是否在同一个域中？如果它们不在同一个域网络服务器上，则文件访问限制可能是一个问题。您是否在控制台上遇到任何错误？
这两个文件都在本地文件系统中。
听起来像crbug.com/229081。
@ErikDahlström 如果是最新的 Chrome，应该可以使用图形，只是样式定义没有从外部文件正确复制（see test file - 我得到了除了在 Chrome 34 上正确的径向渐变颜色之外的所有内容）。如果 OP 什么也没看到，我的第一个猜测仍然是本地文件访问限制。 SubbuS：您在控制台上遇到任何错误吗？
不，我没有收到任何错误。

标签： svg

【解决方案1】：

请从链接中删除 [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>

【讨论】：