3

Webページのマップに表示されるマーカーを含む次のSVG要素があります。マーカーは、<image>さまざまな小さなPNG画像を参照する要素で構成されています。

<svg id="OL_105_svgRoot" width="1246" height="373" viewBox="0 0 1246 373">
 <g id="OL_105_root" style="visibility: visible;" transform="">
  <g id="OL_vroot">
   <image id="P115" cx="843" cy="203" r="1" x="827" y="188" width="32" height="32" href="spider.png" ...>
   <image id="P119" cx="453" cy="269" r="1" x="437" y="254" width="32" height="32" href="zoo.png" ...>
   <image id="P123" cx="628" cy="82" r="1" x="612" y="67" width="32" height="32" href="wild.png" ...>
   <image id="P131" cx="10495" cy="69" r="1" x="1034" y="53" width="32" height="32" href="export.png" ...>
...
  </g>
 </g>
</svg>

これらの画像を単一の大きな画像ファイルに置き換え、CSSbackground-positionプロパティに似たものを使用して各画像の表示ウィンドウを指定する方法はありますか？

4

1 に答える 1

2

<image>要素を内部要素にラップし、要素に<svg>特定の幅と高さを指定し、属性と属性を使用して要素<svg>に「background-position」を指定すると、解決策になる可能性があります。<image>xy

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <svg width="17" height="19">
    <image xlink:href="http://s14.postimage.org/f66u116ap/rainbow_Hello_World4.png" width="188" height="19"/>
  </svg>
  <svg width="17" height="19" x="12" y="19">
    <image xlink:href="http://s14.postimage.org/f66u116ap/rainbow_Hello_World4.png" width="188" height="19" x="-17"/>
  </svg>
  <svg width="17" height="19" x="35" y="6">
    <image xlink:href="http://s14.postimage.org/f66u116ap/rainbow_Hello_World4.png" width="188" height="19" x="-34"/>
  </svg>
  <svg width="17" height="19" x="46" y="14">
    <image xlink:href="http://s14.postimage.org/f66u116ap/rainbow_Hello_World4.png" width="188" height="19" x="-51"/>
  </svg>
  <svg width="17" height="19" x="60" y="24">
    <image xlink:href="http://s14.postimage.org/f66u116ap/rainbow_Hello_World4.png" width="188" height="19" x="-68"/>
  </svg>
</svg>

（Tinkerbinのテストを参照してください。）

属性を使用することもできますがclip-path、これは上記の解決策よりもさらに面倒だと思います。

于 2012-11-16T08:04:57.497 に答える