SVG模式未显示在页面上 [英] SVG Pattern Doesn't Show on Page

问题描述

我完全一无所知，我的svg模式出了什么问题.我在svg的def部分中定义了它，然后尝试引用它.但是，一旦将svg包含在img标签中，它就不会显示.如果我在浏览器中自行打开它，则一切都很好.

I am completely clueless, what is going wrong with my svg pattern. I defined it in the def section of the svg and then tried to reference it. But it doesn't show up once I include the svg in an img-tag. If I open it on itself in the browser everything is good though.

请参阅以下示例: http://kijani.co/img/sketch/index.html http://kijani.co/img/sketch/livingroom.svg

See the following examples: http://kijani.co/img/sketch/index.html http://kijani.co/img/sketch/livingroom.svg

我的代码:

<defs>
  <pattern id="paper" patternUnits="userSpaceOnUse" width="200" height="200">
    <image xlink:href="http://kijani.co/img/pattern/paper.jpg" width="200" height="200"/>
  </pattern>
</defs>
<g id="background">
  <path id="paper" fill="url(#paper)" d="..."/>
</g>

这可能是一个非常愚蠢的问题，但是我对svg还是很陌生，到目前为止找不到任何解决方案.

This might be a really stupid question, but I am fairly new to svg and couldn't find a solution anywhere so far.

推荐答案

这是svg的引用模式问题.
重新调整了使用img元素显示svg图像以引用外部资源.
因此，您应该使用object元素显示svg图像，或通过数据方案格式将图案图像嵌入svg.

This is svg's referencing mode probrem.
Using img element to display svg image is restrected for refering outer resources.
So you should use object element to display svg image, or embed pattern image into svg by data scheme format.

这篇关于SVG模式未显示在页面上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！