Question

我有一个由路径元素制作的svg图像，路径元素在g标签内部，用于转换并将填充应用于路径元素。我使用的填充是在defs标签中预定义的模式。 pattern元素包含链接到oth的图像标记

现在的问题是：当我把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文件作为数据网址嵌入SVG文件中，以使其正常工作。

Answer 2

您应该检查坐标x和y处的数字以及href到svb_bg.png的数字。

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

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

2 个答案: