22

svg画像の周りに境界線を追加しようとしています。私は2つのアプローチを試しましたが、両方とも失敗しました...

試行1：画像を描画しますが、境界線は描画しません。

<image id="note-0" xlink:href="http://example.com/example.png" x="185" y="79" height="202" width="150" style="stroke:#ac0d0d; stroke-width:3;"></image>

試行2：画像を描画しますが、境界線は描画しません。

<defs>
    <image id="image1352022098990svg" height="202" width="150" xlink:href="http://example.com/example.png"></image>
</defs>

<use xmlns="http://www.w3.org/2000/svg" id="note-0" xlink:href="#image1352022098990svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="185" y="79" height="202" width="150" style="stroke:#ac0d0d; stroke-width:3;"/>

だから私の質問は、svg要素に画像を定義し、同時にその周りに境界線/ストロークを持たせることは可能ですか？

さらに、translateとx/y属性を使用してsvg要素を配置できるようです。どちらが優先され、その理由は何ですか？

4

3 に答える 3

35

ストローク<image>はまたはに適用されず<use>、図形とテキストのみに適用されます。その周りに境界線を描画する場合は<rect>、画像と同じx、y、幅、高さで画像の後にaを描画し、そのストロークと「なし」の塗りつぶしを指定します。

対x/yの変換については、ユースケースによって異なります。

于 2012-11-04T10:35:02.400 に答える
9

何らかの理由でSVG要素を変更できない場合は、outlineCSSプロパティを使用した回避策があります。

#note-0 {
    outline: 6px solid white;
}
于 2019-11-11T13:09:13.613 に答える
1

円形の画像（たとえば、svg形状）をラップする必要があり、輪郭を描くために色が必要な場合は、次のようなものが便利です。

image { 
    filter: drop-shadow(0px 0px 1px red);
}
于 2021-03-18T12:37:10.687 に答える