html - SVG 引用外部模式 ID

Question

我有两个 SVG - 一个是矩形形状的 Logo ，另一个是背景图案图像的单个 svg。

标志在文档中多次重复，当 <rect> 出现时设置为由 #rect-fill 填充, id 为 #rect-fill 的模式 svg 的多个实例元素破坏了它并且背景图像不显示，所以现在我将它们分开了。

现在，由于模式 id 在 #rect-container 之外svg，图案图像不显示，无法加载图像。

有没有为 rect 引用一个模式？在其包含 <svg> 之外在另一个<svg> ？

<!-- the logo svg -->
<svg id="rect-container" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- left squares -->
    <rect />
    <rect />
    <rect />

    <!-- right squares -->
    <rect />
    <rect />
    <rect />
</svg>

<!-- the background image pattern -->
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
    <pattern id="rect-fill" patternUnits="userSpaceOnUse" x="0" y="0" width="1112" height="100%">
        <image xlink:href="../assets/images/hero.png"  width="100%" height="100%" preserveAspectRatio="xMinYMid slice"/>
    </pattern>
</svg>

<style>
/* Reference the pattern outside of the rect's svg */
#rect-container rect {
    fill(#rect-fill);
}
</style>

Answer 1

首先，您需要使用 <defs> 创建一个 svg 作为其他资源可用的资源.

<!-- the background image pattern -->
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
    <defs>
        <pattern id="rect-fill" patternUnits="userSpaceOnUse" x="0" y="0" width="1112" height="100%">
            <image xlink:href="../assets/images/hero.png"  width="100%" height="100%" preserveAspectRatio="xMinYMid slice"/>
        </pattern>
    </defs>
</svg>

然后你就可以重用这个元素了。更多信息 here

<!-- the logo svg -->
<svg id="rect-container" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- left squares -->
    <rect fill="url(#rect-fill)"/>
</svg>