svg图像模式填充未在html中呈现

Question

我有一个由path元素制成的svg图像，并且path元素位于g标记内，这些标记可将填充转换并应用于path元素。 我使用的填充是在defs标签中预定义的模式。 模式元素包含链接到其他位置的图像标签

现在的问题是：当我将svg代码直接放入html时，它工作正常； 但是图片需要灵活调整大小，因此必须在img标签中。 不幸的是，当我从外部链接svg时，路径元素上的填充变得透明。我认为问题在于图像无法渲染，因为当我用简单的十六进制颜色替换填充时，它可以正常工作。

这是svg：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="232" height="158">
        <defs>
            <filter id="contrast">
                <feComponentTransfer>
                  <feFuncR type="linear" slope="25" intercept="-(0.5 * 25) + 0.5"></feFuncR>
                  <feFuncG type="linear" slope="25" intercept="-(0.5 * 25) + 0.5"></feFuncG>
                  <feFuncB type="linear" slope="100" intercept="-(0.5 * 100) + 0.5"></feFuncB>
                </feComponentTransfer>
             </filter>
            <pattern id="bg1" patternUnits="userSpaceOnUse" width="1000" height="3000">
                <image xlink:href="svg_bg.png" x="0" y="-25" width="2200" height="1800" style="filter: url(#contrast);"></image>
            </pattern>
        </defs>
        <g transform="scale(0.5,0.5)" stroke="none" fill="url(#bg1)">
            <path d="M150 0 L75 200 L225 200 Z" />
        </g>
    </svg>

Answer 1

在图像上下文中使用时，即通过<img>标签或CSS背景图像，SVG文件必须在单个文件中完整，以保护用户的隐私。

您需要将svg_bg.png文件作为数据URL嵌入到SVG文件中，以使其正常工作。

Answer 2

您应该在所有位置检查x和y坐标中的数字，并href到svb_bg.png 。

演示代码： http : //jsbin.com/diwoduheze/1/