将 SVG 移动到外部文件时，模式不再有效

Question

这是一个 SVG。如果您将它直接添加到您的 HTML 页面，它将呈现得很好。请注意，该文件夹的右侧有一个用黑白方格图案完成的细微阴影。

<svg
        xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink"
        version="1.1"
        width="96px"
        height="48px"
        viewBox="0 0 48 24"
        enable-background="new 0 0 48 24"
        id="svg"
    >
        <defs>
            <pattern id="checkers" x="0" y="0" width="2" height="2" patternUnits="userSpaceOnUse">
                <rect style="fill: #000" x="0" y="0" width="1" height="1"></rect>
                <rect style="fill: #000" x="1" y="1" width="1" height="1"></rect>
            </pattern>
        </defs>
        <path
            d="M 1 6 l 8 -4 l 37 0 v 12 l -5 8"
            style="fill: #fff; stroke: #000; stroke-width: 1px"
        />
        <path d="M 45.5 2 L 45.5 14 l -5 8" 
            style="fill: url(#checkers); stroke: none;"
        />
        <path 
            d="M 1 6 h 40 v 16 h -40 v -16" 
            style="fill: #fff; stroke: #000; stroke-width: 1px"
        />
        <path
            d="M 4 9 h 34 v 10 h -34 v -10"
            style="fill: transparent; stroke: #000; stroke-width: 1px"
        />
        <path
            d="M 17.5 13.5 l -1.5 1.5 l 8 0 l 1.5 -1.5 M 46 2 L 41 6" 
            style="fill: transparent; stroke: #000; stroke-width: 1px"
        />
    </svg>

我想将其移动到外部文件。我从 HTML 中引用它是这样的：

<svg width="64px" height="64px">
    <use xlink:href="./svg/drawer.svg#svg" />
</svg>

但是，当这样引用时，SVG 将呈现，但该模式不再有效。抽屉的右手边只是白色，没有显示格子图案。我怀疑 url(#checkers) 不能在外部文件中使用。我该怎么做呢？

Answer 1

我终于设法通过使用 object 或 img 标签而不是 svg 和 use 来让它工作。在HTML中，我写：

<object data="./svg/drawer.svg#svg" type="image/svg+xml"></object>

或者：

<img src="./svg/drawer.svg#svg" width="96px" height="48px"></img>

后一种变体可能更好，因为您可以将 onClick 处理程序添加到 img，但不能添加到 object。

我不知道为什么这行得通而 svg 行不通，所以最好知道是否有人知道原因。

将 SVG 移动到外部文件时，模式不再有效

Pattern no longer working when moving SVG to an external file

svg

svg-pattern