Question

以下HTML代码为我提供了一个模式，该模式在另一个SVG中包含.svg类型的图像。

<html>
  <body>
    <svg width="0px" height="0px">
      <defs>
        <pattern id="saint1729" patternUnits="userSpaceOnUse" width="8" height="8" fill="#ff7156">
          <image xlink:href="http://saint1729.me/tiny-checkered-pattern.svg" x="0" y="0" width="8" height="8" />
        </pattern>
      </defs>
    </svg>
    <div>
      <svg width="240" height="16">
        <path d="M0 0 H240 V16 H0 Z" fill="url(#saint1729)"/>
      </svg>
    </div>
  </body>
</html>

当我将模式中的图像属性href更改为直接SVG标签（来自同一URL）时，看不到任何呈现的内容。这是此方案的代码。

<html>
  <body>
    <svg width="0px" height="0px">
      <defs>
        <pattern id="saint1729" patternUnits="userSpaceOnUse" width="8" height="8" fill="#ff7156">
          <image xlink:href="<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><g fill='#c82c0e' fill-opacity='1'><path fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/></g></svg>" x="0" y="0" width="8" height="8" />
        </pattern>
      </defs>
    </svg>
    <div>
      <svg width="240" height="16">
        <path d="M0 0 H240 V16 H0 Z" fill="url(#saint1729)"/>
      </svg>
    </div>
  </body>
</html>

两者之间有什么区别？如何使第二种方法起作用？

我正在使用 Google Chrome 浏览器。

Answer 1

但这是可行的。您需要对svg进行编码。我使用这个SVG encoder。另外，请阅读这篇文章：Optimizing SVGs in data URIs

<svg width="0px" height="0px">
      <defs>
        <pattern id="saint1729" patternUnits="userSpaceOnUse" width="8" height="8" fill="#ff7156">
          <image xlink:href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cg fill='%23c82c0e' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h4v4H0V0zm4 4h4v4H4V4z'/%3E%3C/g%3E%3C/svg%3E" x="0" y="0" width="8" height="8" />
        </pattern>
      </defs>
    </svg>
    <div>
      <svg width="240" height="16">
        <path d="M0 0 H240 V16 H0 Z" fill="url(#saint1729)"/>
      </svg>
    </div>

SVG模式定义中的图像标记不接受SVG格式的图像

1 个答案: