将图像放在另一个 png/svg 文件中

Posted 2023-03-28

【中文标题】将图像放在另一个 png/svg 文件中

【英文标题】：Placing an Image inside another png/svg file

【发布时间】：2021-10-20 05:45:40

【问题描述】：

目前我有一个 png 图像，中间有一个空的蓝色空间。参考图片：

我希望能够通过 html 将另一个图像嵌入到蓝色空间中。我想到的一种解决方案是创建一个 SVG，但我如何让图像适合 svg。 我不能使用绝对定位来放置这些图像，因为带有蓝色空间的主图像被动态放置在地图中作为标记。

当前 SVG：

  <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 85.000000 109.000000"
     preserveAspectRatio="xMidYMid meet">
    <metadata>
    Created by potrace 1.10, written by Peter Selinger 2001-2011
    </metadata>
    <g transform="translate(0.000000,109.000000) scale(0.100000,-0.100000)"
    fill="#ffff00" stroke="none">
    <path d="M390 1061 c-5 -11 -38 -33 -72 -50 -68 -34 -63 -43 6 -11 44 21 109
    80 88 80 -6 0 -16 -9 -22 -19z"/>
    <path d="M455 1050 c55 -57 178 -99 295 -100 31 0 61 -5 68 -12 9 -9 12 -84
    12 -278 0 -340 -1 -344 -114 -455 -76 -75 -182 -146 -265 -178 -27 -10 -37 -8
    -88 17 -139 68 -259 167 -312 256 -25 43 -26 52 -32 240 l-6 195 1 -200 c1
    -197 1 -201 27 -245 64 -109 300 -280 385 -280 31 0 154 65 229 120 71 52 143
    133 166 185 18 40 19 65 17 342 l-3 298 -84 7 c-152 13 -257 47 -288 94 -8 13
    -20 24 -26 24 -6 0 2 -14 18 -30z"/>
    <path d="M406 1035 c-32 -49 -201 -104 -323 -105 l-43 0 0 -282 c0 -277 1
    -284 24 -333 39 -82 146 -174 291 -250 l67 -34 61 31 c151 76 265 170 303 253
    23 49 24 57 24 330 l0 281 -103 12 c-124 13 -206 42 -252 87 l-33 34 -16 -24z
    m63 -48 c9 -8 33 -20 53 -28 20 -7 35 -16 32 -20 -2 -4 5 -5 16 -2 11 3 20 1
    20 -5 0 -5 41 -15 92 -21 51 -7 93 -13 94 -14 1 -1 5 -117 8 -257 5 -187 3
    -266 -6 -295 -14 -47 -130 -170 -193 -204 -22 -12 -62 -35 -90 -51 -27 -16
    -59 -29 -70 -29 -21 0 -138 58 -120 59 6 0 -9 9 -32 20 -24 10 -43 24 -43 30
    0 5 -6 10 -13 10 -7 0 -39 26 -70 57 -43 43 -56 62 -51 77 4 15 3 17 -4 7 -7
    -10 -12 -5 -20 20 -13 38 -16 558 -4 561 4 0 19 2 33 3 67 5 135 17 172 31 56
    21 127 56 133 65 6 11 44 2 63 -14z"/>
    <path d="M228 973 c7 -3 16 -2 19 1 4 3 -2 6 -13 5 -11 0 -14 -3 -6 -6z"/>
    <path d="M173 963 c9 -2 23 -2 30 0 6 3 -1 5 -18 5 -16 0 -22 -2 -12 -5z"/>
    <path d="M16 944 c-3 -9 -5 -59 -4 -112 l2 -97 3 85 c4 127 5 128 61 133 l47
    3 -51 2 c-39 2 -53 -2 -58 -14z"/>
    </g>
    </svg>

【问题讨论】：

将图像包装在容器中，然后对第二张图像使用绝对定位

@Pete 我不能这样做，因为这些图像作为标记被动态放置在地图上

当然，如果它们是地图标记，那么为每种类型的标记创建单独的图标会更容易，而不是试图在图像中捏造一些图像 - 我看不出你的方法会有什么好处- 每个次要图像仍然需要单独的图像

嗯，我正在尝试将每个国家/地区的风景嵌入蓝色空间中。不是你可以用不同的图标真正表示的东西

【参考方案1】：

我正在使用您的部分路径来剪辑图像。

我也在使用带有<use> 的那部分作为边框。

观察：虽然我使用了您的部分代码，但您拥有的路径对剪辑没有用处，因为它们大多是空心路径。

svgborder:solid

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 850 1090" preserveAspectRatio="xMidYMid meet">

  <clipPath id="clip">
    <path id="path" transform="translate(0,1090) scale(1,-1)" d="M406 1035 c-32 -49 -201 -104 -323 -105 l-43 0 0 -282 c0 -277 1
    -284 24 -333 39 -82 146 -174 291 -250 l67 -34 61 31 c151 76 265 170 303 253
    23 49 24 57 24 330 l0 281 -103 12 c-124 13 -206 42 -252 87 l-33 34 -16 -24z" />
  </clipPath>

  <image x="-200" y="30"   clip-path="url(#clip)" xlink:href="https://assets.codepen.io/222579/darwin300.jpg" />

  <use xlink:href="#path" fill="none" stroke="gold" stroke- />
</svg>

另一种方法是使用图像作为填充路径的图案。

请注意，在这种情况下，我使用的是转换后的（倒置）图像。

svgborder:solid

<svg version="1.0" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 850 1090" preserveAspectRatio="xMidYMid meet">
  
   <pattern id="pat"  >   
  <image x="-200" y="30"   transform="translate(0,1090) scale(1,-1)"  xlink:href="https://assets.codepen.io/222579/darwin300.jpg" />
  </pattern>

 <g transform="translate(0,1090) scale(1,-1)" >
    <path id="path" d="M406 1035 c-32 -49 -201 -104 -323 -105 l-43 0 0 -282 c0 -277 1
    -284 24 -333 39 -82 146 -174 291 -250 l67 -34 61 31 c151 76 265 170 303 253
    23 49 24 57 24 330 l0 281 -103 12 c-124 13 -206 42 -252 87 l-33 34 -16 -24z"  fill="url(#pat)"/>
   <use xlink:href="#path" fill="none" stroke="gold" stroke- />
  </g>
</svg>