SVG填充外部文件

真正基本的SVG问题。我已阅读 SVG sprite in external file 并且它对我添加svg图形效果很好，但我无法使其与defs一起使用。首先，文件“defs.svg”：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在外部文件中。

对不起，如果你认为这已被其他地方回答，但我已经阅读了大量的东西，并认为如果我能得到精灵版本工作，那么为什么不是defs版本。（我是很新的svg）

来源

2015-10-11 gavin

这已经由@下面的Robert'Longson'回答了，但是对于Chrome浏览器/其他浏览器修复了赞赏 – gavin

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

在那个<use>上方有指向的东西呈现，而不是一个模式。如果你想用一个模式填充一个圆圈，只需要将该圆圈的填充设置为该模式。例如。

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

请注意，外部填充不是广泛支持，虽然他们在Firefox上工作。

来源

2015-10-11 15:13:21

嗨，谢谢，但是我已经尝试过了，并且它没有工作。在firefox，opera和chrome – gavin

中，我想我正在考虑使用外部svg文件，而不是像样式表或图形库。它适用于图形，我希望它能用'defs'/pattern填充。 – gavin

你好@RobertLongson，你说过“如果你想用一个模式填充一个圆圈，只需要将该圆圈的填充设置为该模式”。我在我的例子中已经完成了，我只想在外部文件中定义该模式。 – gavin

SVG填充外部文件

回答

相关问题