矩形或圆形的 SVG 图像显示为黑色答案

【问题标题】：SVG image in rect or circle show as black矩形或圆形的 SVG 图像显示为黑色
【发布时间】：2012-09-26 22:25:07
【问题描述】：

我一直在搜索 stackoverflow 和谷歌，以找到我的代码无法正常工作的原因。我试图放置一个图像作为一个圆圈的填充，但它只显示为黑色。这是我所拥有的。

<svg width="100%" height="99%">
    <defs>
        <pattern id="tile-ww" x="0" y="0" patternunits="userSpaceOnUse" width="24" height="24">    
            <img xlink:href="distributor-sprite.png" width="24" height="24" x="0" y="0">
        </pattern>
        <pattern id="tile-us" x="0" y="0" patternunits="userSpaceOnUse" width="24" height="24">
            <img xlink:href="distributor-sprite.png" width="24" height="24" x="0" y="0">
        </pattern>
    </defs>

    <g id="stage" transform="translate(80,10)">
        <g class="node" transform="translate(380,44.375)">
            <rect class="name" ry="3" rx="3" height="15" x="-32" width="32"></rect>
            <circle r="54.5" id="circle-4" fill="url(#tile-ww)"></circle>
            <text id="text-4" x="-10" dy=".35em" text-anchor="end" z="1">Jon</text>
        </g>
    </g>
</svg>

我也尝试过用 css 应用该模式，但无济于事

.node circle {
    cursor: pointer;
    stroke: #282828;
    stroke-width: 1.5px;
    fill: url(#tile-ww);
}

我已经两次和三次检查图像是否正确。我尝试过相对路径和绝对路径，但没有运气。

【问题讨论】：

标签： image svg d3.js

【解决方案1】：

在pattern defs 中使用<image /> 而不是<img />。为我工作！

<img> 是 HTML5 规范元素，而 <image> 是 SVG 规范的一部分。更多信息在这里：http://www.w3.org/TR/SVG/struct.html#ImageElement

【讨论】：

什么...我正在使用 javascript 将模式 defs 动态添加到 svg 中，在字符串中它是 <image> 但在 DOM 中它正在更改为 <img> Good catch