Блог

Главная - Вопросы по программированию - Размещение изображения внутри другого файла png/svg

Размещение изображения внутри другого файла png/svg

#html #image #svg

Вопрос:

В настоящее время у меня есть изображение в формате png, где посередине есть пустое синее пространство. эталонное изображение:

введите описание изображения здесь

Я хочу иметь возможность вставлять другое изображение в синее пространство с помощью html. Одним из решений, о котором я подумал, было создание SVG, но как мне сделать так, чтобы изображение вписывалось в svg. Я не могу использовать абсолютное позиционирование для размещения этих изображений, так как основное изображение с синим пробелом динамически размещается на карте в качестве маркера.

Текущая SVG:

   <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
     width="85.000000pt" height="109.000000pt" 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>

Комментарии:

1. оберните изображение в контейнер, а затем используйте абсолютное позиционирование для второго изображения

2. @Pete Я не могу этого сделать, так как эти изображения динамически размещаются на карте в качестве маркера

3. Конечно, если это маркеры карты, было бы проще создать отдельный значок для каждого типа маркера, а не пытаться подделать какое — то изображение внутри изображения — я не вижу, какую пользу принесет ваш подход-вам все равно нужны отдельные изображения для каждого вторичного изображения

4. Ну, я пытаюсь, чтобы пейзажи каждой страны были встроены в голубое пространство. Не то, что вы действительно можете указать разными значками

Ответ №1:

Я использую часть одного из ваших путей для обрезки изображения.

Я также использую эту часть в <use> качестве границы.

Наблюдение: хотя я использую часть вашего кода, имеющиеся у вас пути бесполезны для отсечения, так как это в основном пустые пути.

 svg{border:solid} 
 <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="85.000000pt" 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" width="1090" height="1090" clip-path="url(#clip)" xlink:href="https://assets.codepen.io/222579/darwin300.jpg" />

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

Еще один способ сделать это-использовать изображение в качестве шаблона для заполнения пути.

Пожалуйста, обратите внимание, что в данном случае я использую преобразованное (перевернутое) изображение.

 svg{border:solid} 
 <svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="85.000000pt" viewBox="0 0 850 1090" preserveAspectRatio="xMidYMid meet">
  
   <pattern id="pat" width="1" height="1">   
  <image x="-200" y="30" width="1090" height="1090" 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-width="30" />
  </g>
</svg>
Метки: