我一直在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>
,但在DOM中它被更改为<img>
。好发现! - brenjt