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

【问题标题】：svg image pattern fill doesnt render in htmlsvg 图像模式填充不会在 html 中呈现
【发布时间】：2015-02-07 10:13:39
【问题描述】：

我有一个由路径元素制作的 svg 图像，路径元素位于 g 标签内，这些标签会转换并将填充应用于路径元素。我使用的填充是在 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>

【问题讨论】：

标签： html css svg fill flexibility

【解决方案1】：

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

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

【讨论】：

这会极大地增加 svg 文件的大小，但我想这是值得的。我只需要裁剪图像。非常感谢！希望我能投票赞成，但我没有足够的声誉。
整体大小是完全一样的不是吗？
是的，但是加载时间要长得多。我已经裁剪了图像，无论哪种方式都很好：golem.fnhost.org/pyro/addons/shared_addons/themes/Golem/img/…
是的，但是您的原始方式根本没有加载 png，所以它更快，因为它什么也没做。这对我来说似乎不是一个公平的速度比较。

【解决方案2】：

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

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

【讨论】：

这些都很好，因为将svg代码直接添加到html中时效果很好