0

我有一个由路径元素制作的 svg 图像，路径元素位于 g 标签内，这些标签将填充转换并应用于路径元素。我使用的填充是在 defs 标签中预定义的模式。模式元素包含链接到 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>
4

2 回答 2

1

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

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

于 2014-12-09T13:54:06.960 回答
0

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

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

于 2014-12-09T14:32:49.113 回答