Question

真正基本的SVG问题。我读过了 SVG sprite in external file 并且我可以添加一个svg图形，但我无法使用defs。首先是文件＆＃39; defs.svg＆＃39;：

 <svg  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" >
    <defs id='patternDefs'>
          <pattern id="pattern1" 
            x="2" y="2"
            width="5" height="5"
            patternUnits="userSpaceOnUse" >
            <circle cx="2" cy="2" r="2" class="blue" />
        </pattern>
    </defs>
</svg>

然后将svg放在一个单独的文件中：

<svg>
    <use xlink:href="defs.svg#patternDefs"></use>
        <circle cx="15" cy="15" r="50" stroke-width="2" stroke="red" fill="url(#pattern1)" />
</svg>

我希望fill="url(#pattern1)"部分能够正常工作，因为这是引用外部文件中def的内容。

很抱歉，如果您认为这已在其他地方得到解答，但我已经阅读了大量内容，并认为如果我可以让精灵版本工作，那么为什么不是defs版本。（我对svg）

非常新

Answer 1

xlink:href="defs.svg#patternDefs"应为xlink:href="defs.svg#pattern1"

最重要的是<use>必须指向要呈现的内容，而不是模式。如果您想用图案填充圆圈，只需将圆圈填充到图案中即可。 E.g。

<svg>
    <circle cx="80" cy="80" r="50" stroke-width="2" stroke="red" fill="url(defs.svg#pattern1)" />
</svg>

请注意，外部填充不受广泛支持，但它们确实适用于Firefox。

SVG填写外部文件

1 个答案: