3

コードが機能しない理由を見つけるために、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);
}

画像が正しいことを二重および三重にチェックしました。相対パスと絶対パスを試しましたが、うまくいきません。

4

1 に答える 1

3

<image />定義の代わりに使用<img />しますpattern。私のために働いた！

<img>は HTML5 仕様の要素です<image>が、 は SVG 仕様の一部です。詳細はこちら: http://www.w3.org/TR/SVG/struct.html#ImageElement

于 2012-10-05T18:12:07.867 に答える