SVG填写外部文件 [英] SVG fills in external file

问题描述

真正的基本SVG问题.我读过了 外部文件中的SVG精灵 对我来说，添加svg图形效果很好，但是我无法将其与defs一起使用.首先是文件"defs.svg":

Really basic SVG question. I have read SVG sprite in external file and it works fine for me to add a svg graphic, but I can't get it to work with defs. First the file '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放在一个单独的文件中:

and then the svg in a separate file:

<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的原因.

I am looking to get the fill="url(#pattern1)" part to work, as that is what is referencing the def in the external file.

很抱歉，如果您认为这已经在其他地方得到了解答，但是我已经阅读了很多东西，并认为如果我可以使sprite版本起作用，那么为什么不使用defs版本呢? (我对svg非常陌生)

Sorry if you think this has been answered elsewhere but I've read a ton of stuff and thought that if I could get the sprite version to work then why not a defs version. (I am very new to svg)

推荐答案

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

最重要的是，<use>必须指向要渲染的内容，而不是模式.如果要用图案填充圆，只需将圆的填充设置为图案即可.例如

On top of that <use> has to point to something to be rendered, not a pattern. If you want to fill a circle with a pattern just set the circle's fill to the pattern. E.g.

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

请注意，尽管外部填充功能确实可以在Firefox上使用，但并未得到广泛支持.

Note that external fills are not widely supported, although they do work on Firefox for instance.

这篇关于SVG填写外部文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！