时间戳

首页 > 解决方案 > 将 SVG 移动到外部文件时，模式不再起作用

svg - 将 SVG 移动到外部文件时，模式不再起作用

问题描述

这是一个 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)不能在外部文件中使用。我该怎么做呢？

标签： svgsvg-pattern

解决方案

object我终于设法通过使用orimg标签而不是svgwith来让它工作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无效，所以如果有人知道原因会很好。

推荐阅读