简体   繁体   English

如何为svg提供背景图片?

[英]How to give an svg a background-image?

I have 2 .svg 's: 我有2个.svg

  1. map.svg - https://github.com/djaiss/mapsicon/blob/master/all/ad/vector.svg map.svg - https://github.com/djaiss/mapsicon/blob/master/all/ad/vector.svg
  2. flag.svg - https://github.com/hjnilsson/country-flags/blob/master/svg/ad.svg flag.svg - https://github.com/hjnilsson/country-flags/blob/master/svg/ad.svg

I want to inject the flag.svg as a background-image into the map.svg 我想将flag.svg作为背景图像注入map.svg

What's the way to do it? 怎么做呢? Is there's an attribute for the svg or a sub element which is right for this kind of task? svg或子元素是否有适合这种任务的属性?

Here's my snippet: 这是我的片段:

 <svg xmlns="http://www.w3.org/2000/svg" width= '400' height='400' version="1" viewBox="0 0 1024 1024"> <path d="M372 98.3c-5.8 3.5-14.9 8.7-20.3 11.6l-9.8 5.3-5.7-1.9c-5.5-1.9-6-1.9-13.4-.3-4.2 1-8.3 2-9.2 2.3-.8.3-3.6 4.4-6.2 9.1-2.6 4.7-5.3 8.6-5.8 8.6-.6 0-8.4.9-17.4 1.9l-16.3 1.9-9.5-2.9c-5.2-1.5-9.8-3-10.2-3.3-.4-.2-4.7-5.4-9.7-11.5-7-8.5-9.6-11-11.5-11-1.4-.1-10.4 1.1-20.1 2.6l-17.6 2.6-2.8 9.5c-2.3 8.1-2.6 10.6-2.1 17.1l.7 7.6-11.5 12-11.5 12-.1 10.2v10.1l3.8.9 3.7.9.6 7.9c.5 7 1.2 9.4 5.8 18.9 3.9 8 5.8 13.4 7.2 20.8 1 5.4 1.9 10.6 1.9 11.6s-3.3 3.9-8.5 7.2l-8.5 5.5v12l-9.8 2.8c-6.8 2-12.6 4.7-19.4 8.8l-9.8 5.8-6.7-2.8c-4.9-2.1-9.7-3.2-17.2-4-5.8-.5-10.8-.8-11.1-.6-.4.2-1 3.9-1.4 8.2-.3 4.3-1.1 12.8-1.7 19-1.3 12.6-.2 11.4-11.6 12.8l-5.2.7-6.7 10.4-6.6 10.5-5.2-.3-5.1-.3-.8 7.6-.9 7.5 6 12c4.1 8.2 8.1 14.3 12.7 19.6l6.6 7.6 7.2.7c13 1.1 12.3.7 15.2 9.6 1.5 4.3 2.5 8.3 2.3 8.9-.2.5-6.3 6-13.6 12.3-12.3 10.5-14.4 11.9-27 17.6-7.5 3.5-14.2 6.8-14.9 7.4-.6.7-6.1 13.4-12.2 28.3s-13.3 32-16.1 37.9c-2.8 6-4.9 11.4-4.7 11.9.3.6 1.6 1.8 3 2.5 2.5 1.3 3 1.1 12.1-6.3l9.5-7.6h7.7c7.1 0 9.4-.6 25.8-6.7 10-3.6 18.6-6.6 19.1-6.6.8 0 26.1 16.3 29.3 18.8.1.1-.2 3.2-.8 6.8-1 6.3-.9 6.8 3.4 18.8 2.4 6.8 4.7 13.2 5.1 14.1.5 1.2 2.3 2 5.5 2.4 2.6.3 5.3.9 5.9 1.3 1 .6 24.9 50.9 25.4 53.4.1.5-5 5-11.3 9.9-6.3 4.9-16.3 13.2-22.2 18.4-10.4 9.2-10.8 9.7-11.4 14.5-.4 2.7-1.2 5.5-1.8 6.3-.6.8-8 4.6-16.4 8.5L82.9 693l-19.7.1c-10.8 0-24.2.6-29.7 1.2l-10 1.2-5.7 8.5c-5.3 7.8-6.3 8.7-11.2 10.5-3 1.1-5.7 2.3-6 2.6-.5.5.3 3.4 2.9 10.7.3.9 2.1.6 7.1-1.3 3.6-1.4 7.2-2.5 8-2.5.7 0 2.1 2.5 3.1 5.6l1.7 5.6 8.6-.6c4.7-.3 13-.8 18.5-1.1l10-.6L75 747.4 89.5 762l-3.8 7.3-3.8 7.2 2.9 13.4 3 13.4 4.9 4.2c2.6 2.3 6.1 5.3 7.8 6.7l2.9 2.6-7.8 8.7-7.9 8.6 3.2 10.7c1.8 5.8 5.7 15.4 8.7 21.3l5.4 10.8-6.7-2.5c-3.7-1.4-7.2-2.8-7.7-3.2-2-1.2 3.6 5.6 12.1 14.6l8.8 9.3L131 898c18.4 2.8 20.9 3.5 45.6 12l26.2 9h43.3l22.5 6.6 22.6 6.6 16.1-5.8 16.2-5.7 28.5-1.8c15.7-1 30.8-1.8 33.6-1.8l5.1-.1.7-4.8c.3-2.6.9-10.6 1.3-17.9l.6-13.2 8.6-2.9c4.7-1.6 8.6-3.3 8.6-3.8s-.4-8.2-.9-17.1c-.8-16-.8-16.3 1.9-24.3 2.1-6.2 3.1-8.1 4.8-8.5 3-.7 16.8-3.5 17.1-3.5.2 0 4.3 5.2 9 11.5 7.7 10.3 9.3 11.8 14.2 14 8.7 3.8 8.2 4.1 12.8-6.8 3.2-7.6 6.3-12.6 13.6-22.1l9.4-12.3 13.6-7.7 13.5-7.8 9.1 4.7 9 4.8 17-1.7c20.8-2 23-2 37.6.1l11.8 1.6 5.7-5c3.2-2.7 6.3-5.2 7-5.6.6-.4 3.7.5 6.8 2l5.6 2.8 9.1-4.9 9-4.8 4.9 4.8 4.9 4.8 8.6-2.8 8.6-2.8 3.1-6.9c2.5-5.9 3.7-7.4 7.8-9.9 5.5-3.3 5.5-2.3.1-14l-2.9-6.6 1.9-4.8c1-2.6 3.4-12.1 5.3-21 4.9-23.5 5.8-27 6.6-28 .4-.4 17.2-2.6 37.4-4.7l36.6-3.9 15.4 11.6 15.5 11.6 3.7-3.3c2.1-1.8 11-10.1 19.8-18.5 8.8-8.3 20.8-19.1 26.7-23.9 8.6-7 11-9.4 11.8-12.4.5-2 1-11.2 1-20.5v-16.9l-4.5-5.5c-2.5-3-4.5-5.7-4.5-6.1 0-.4 2.5-1.5 5.5-2.5l5.5-1.7 6.9-13.7c6.5-13 6.9-14.4 8.6-26.1 1.8-11.9 1.8-12.6 0-19.6l-1.8-7.3 3.8-9.4 3.8-9.3-1.8-13.1-1.8-13.1 6.8-12.5c6.2-11.7 7.4-13.3 16.9-22 17.8-16.6 16.3-15.7 30.9-19.9l13.2-3.8 11.7 1 11.8 1.1 10.7-5.8c13.1-7 38.6-26.7 37.9-29.3-1.4-4.9-8.9-28.7-9.2-29.2-.2-.3-10.8 1.2-23.5 3.3l-23.2 3.9-17.1-5.7c-12.3-4.1-21.4-7.9-32.6-13.7-14.1-7.4-16.4-8.2-26-9.9-5.8-1-13.5-1.8-17.2-1.8-5.8 0-7.5-.4-11.8-3.1-4-2.5-4.9-3.5-4.5-5.2.3-1.2 1.6-9.1 3-17.5l2.5-15.3 6-8c4-5.3 6-9 6-10.9 0-2.1 1.1-3.6 4.7-6.4 2.6-2 7.3-6.7 10.5-10.5l5.9-7-3-5.8c-1.6-3.2-3.2-8.4-3.6-11.6-.4-3.1-1.1-5.7-1.5-5.7-.4 0-2.9 1.9-5.6 4.2-2.7 2.3-5.6 4.8-6.5 5.5-1.4 1.2-3.9 1.1-16.5-.6-8.1-1.2-18.3-2.1-22.5-2.1-6.4 0-9.6-.6-18.1-3.7-9.4-3.4-11.1-4.4-19.6-11.8-12.2-10.8-17.5-13-38-15.6l-15.4-2-10.2 6.1-10.2 6-10.5.1c-5.7 0-12.6.4-15.3.8-6.2 1-13.4-.5-19.8-4.3-4.4-2.6-4.7-3-5.4-8.2-.4-3.5-1.2-5.8-2.3-6.3-2.3-1.3-37.5-9.1-47.5-10.5l-8.1-1.2-9.9 4.9-9.9 4.9-7.7-1.1c-5.2-.7-8.9-.7-11.1 0-4.6 1.3-15.9.2-24.7-2.6-8.5-2.7-12.1-2.2-18.6 2.6-3.3 2.4-5 2.9-9.8 2.9H520l-6.6-13.3c-3.7-7.2-7.1-13.5-7.7-13.8-.5-.4-2.8-1-5.1-1.3-4.1-.7-34.6-7.3-37.8-8.2-1.6-.5-1.8-1.9-1.8-10.3v-9.8l-4.5-1.7c-2.4-1-4.6-2.5-4.9-3.4-.2-.9-.8-5.8-1.1-10.9l-.7-9.2-7.1-.3-7.1-.3-6.3-8.9c-3.4-4.8-6.4-9.1-6.7-9.3-.3-.3-4 .7-8.4 2.2l-7.8 2.8-11.5-8.6c-6.4-4.8-11.8-8.7-12-8.7-.2 0-5.1 2.8-10.9 6.3z"/> <image xlink:href="https://upload.wikimedia.org/wikipedia/commons/6/6b/Flag_of_Norway%2C_state.svg" /> </svg> 

Use the image element and reference your SVG file. 使用图像元素并引用您的SVG文件。

<svg>
  <image href="flag.svg"/>
</svg>

then set the map.svg as the background image. 然后将map.svg设置为背景图片。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM