I have the following SVG elements containing markers to be displayed on a map in a web page. The markers are composed of the <image>
elements referencing to various small PNG images:
我有以下SVG元素包含要在网页的地图上显示的标记。标记由引用各种小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>
Is there any way I can replace those images with a single large image file and use something similar to CSS background-position
property to specify the viewing window for each image?
有没有什么办法可以用一个大图像文件替换这些图像,并使用类似于CSS background-position属性的东西来指定每个图像的查看窗口?
1 个解决方案
#1
2
Wrapping the <image>
elements into inner <svg>
elements, specifying a certain width and height on the <svg>
element and the "background-position
" on the <image>
element using the x
and y
attributes might be a solution:
将元素包装到内部
<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>
(See a test on Tinkerbin.)
(参见Tinkerbin的测试。)
You could also use the clip-path
attribute, but I guess this is even more tedious than the above solution.
你也可以使用clip-path属性,但我想这比上面的解决方案更加乏味。
#1
2
Wrapping the <image>
elements into inner <svg>
elements, specifying a certain width and height on the <svg>
element and the "background-position
" on the <image>
element using the x
and y
attributes might be a solution:
将元素包装到内部
<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>
(See a test on Tinkerbin.)
(参见Tinkerbin的测试。)
You could also use the clip-path
attribute, but I guess this is even more tedious than the above solution.
你也可以使用clip-path属性,但我想这比上面的解决方案更加乏味。