SVG填充外部文件

真正基本的SVG问题。我读过 添加svg图形对我来说很好，但我无法让它与

defs

一起使用。首先是文件“defs.svg”：

 <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

很抱歉，如果你认为这已经在别处得到了回答，但我已经读了很多东西，并且认为如果我可以让sprite版本工作，那么为什么不使用

defs

版本呢。（我对

svg

非常陌生）

xlink:href=“defs.svg#patternDefs”

应该是

xlink:href=“defs.svg#pattern1”

除此之外，

必须指向要渲染的对象，而不是模式。如果要用图案填充圆，只需将圆的填充设置为图案。例如

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

---

请注意，虽然外部填充可以在Firefox上使用，但它并没有得到广泛的支持。

您好，谢谢，但我已经尝试过了，但没有成功。在firefox、opera和chromeI中，我假设我正在考虑使用外部svg文件，而不是样式表或图形库。它适用于图形，我希望它适用于

defs

/pattern fills。您好@RobertLongson，您说过“如果您想用图案填充圆，只需将圆的填充设置为图案”。在我的示例中，我已经这样做了，我只希望在一个外部文件中定义该模式。根据我的回答，它确实适用于Firefox上的原始defs.svg。我不知道您试图对

元素执行什么操作，因此我已将其删除。我的OP中的第一个代码部分位于不同的文件中。如何删除

使用
使其工作？但对我来说，第二个代码片段怎么可能知道#pattern1是什么呢？这一点在下面的firefox中已经得到了Robert Longson
的回答，但chrome/其他浏览器对此表示感谢