1

Может кто знает как вставить изображение, а может даже сразу несколько небольших объектов внутрь объекта svg Path c нестандартным контуром? Пример кода и вида объекта я приложил. Туда необходимо вставить штук 5-10 (сколько позволит размер самого объекта) изображений, так чтобы они не вылазили за границы данного PATH. Буду благодарен за помощь и подсказки! Нигде в интернете не получилось найти информацию на данную тему.

<svg xmlns:mapsvg="http://mapsvg.com" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" mapsvg:geoViewBox="14.122232 54.834941 24.149724 49.002699" preserveAspectRatio="xMidYMid meet" viewBox="0 0 612.75696 577.23169" style="transform: scale(1);">
  <path d="m 11.786011,102.23195 4.79,0.56 -2.98,2.15 0.02,2.41 -3.55,-5.1 1.72,-0.02 z m 5.9,-0.18 0.57,1.34 -2.05,0.97 1.48,-2.31 z m -4.63,-1.01 1.72,1.45 -2.8,-0.02 1.08,-1.43 z m 2.18,-1.260004 -0.09,2.460004 -1.22,-1.71 1.31,-0.750004 z m -7.1799998,-4.24 1.81,-0.17 -2,2.57 5.5999998,9.490004 -7.6199998,-6.1 0.09,-3.460004 -1.78,-1.3 3.9,-1.03 z m 30.9699998,-4.48 -0.04,1.47 -3.22,0.32 0.43,-3.07 2.83,1.28 z m 0.62,-5.52 -4.4,2.66 0.06,5.87 -3.74,4.45 -2.78,9.590004 -1.28,-5.2 -8.61,-1.35 0.56,-4.000004 -0.68,1.87 -2.52,-0.83 -5.74,3.470004 0.82,-1.22 -2.8499998,-2.590004 1.7299998,-2.6 6.88,0.43 6.12,-4.69 16.43,-5.86 z m 119.649999,-57.14 2.81,8.19 2.93,1.21 1.44,3.33 0.42,7.69 -2.7,0.69 0.48,4.96 3.07,3.61 -0.67,2.34 -7.53,2.85 -0.96,2.11 5.46,10.1 -1.32,1.79 1.89,2.77 -1.23,4.1 0,0 -0.42,0.51 0,0 0.35,4.92 0,0 0.71,-0.06 0,0 0.76,-2.57 1.54,0.81 2.04,2.34 0.13,3.64 6.46,3.65 -0.81,3.420004 -4.65,-0.73 -1.34,1.29 -0.03,3.76 4.44,3.3 -5.27,5.36 2.17,9.18 0,0 -3.08,3.27 -1.17,-1.85 -4.3,2.2 -1.9,10.33 -4.41,3.6 -9.63,1.62 -2.23,-1.69 -0.45,1.15 1.68,8.48 1.84,-0.58 3.19,3.01 4.64,1.28 4.52,4.26 -4.91,4.04 0.59,5.45 -4.77,-2.09 -0.12,1.65 -1.7,-0.48 -1.12,4.71 -2.55,-0.77 -2.5,2.78 -1.29,-1.49 -1.18,4.39 -2.73,1.03 1.1,3.94 -3.58,3.48 0.74,1.03 -3.06,-0.79 -9.03,4.32 -9.45,-3.38 0,0 1.5,-6.34 -8.12,-1.94 0.43,2.35 -3.09,1.37 0.54,1.97 -2.52,0.51 1.68,2.15 -3.249999,1.32 0.989999,2.08 -2.289999,1.29 -2.41,-1.22 -2.64,2.23 -5.7,-3.19 -8.18,2.82 -3.33,3.79 -4.55,-1.01 2.15,6.48 -14.94,6.38 -2.21,-2.53 -2.56,1.8 -5.28,-4.38 -2.04,2.75 2.05,1.91 -3.88,1.21 0.78,3.01 -3.97,3.2 -3.25,11.53 -2.26,1.44 -4.71,-2.56 -2.09,1.77 0.07,3.59 0,0 -8.33,-5.51 -6.87,-8.95 -8.1299998,-6.62 -5.84999998,-2.23 2.30999998,-4.67 -1,-7.74 12.1999998,-9.21 2.6,-9 -0.63,-5.94 4.31,-6.45 -2.39,-4.63 -3.31,-18.78 -2.83,-5.34 0.58,-7.55 -2,-1.76 -1.0999998,-6.51 2.5899998,-0.63 -1.39,-4.04 2.84,0.9 4.64,5.65 5.85,1.22 5.74,7.4 1.33,-6.18 -2.96,-0.14 -1.95,-4.79 1.67,-6.2 3.01,-0.49 -0.56,-5.58 2.74,-7.540004 4.41,-4.58 2.15,1.58 0.27,-4.75 1.42,-0.4 -1.34,-2.03 2.44,-3.69 -4.76,0.78 34.65,-12.91 12.57,-2.06 21.299999,-7.6 15.15,-3.38 10.18,-8.13 15.9,-19.6 12.32,-3.16 z" title="Zachodniopomorskie" id="PL-ZP" class=" mapsvg-region" style="fill: rgba(255, 255, 255, 0); stroke: rgb(0, 186, 159); stroke-width: 0.623143px;"></path>
</svg>

1 ответ 1

0

Туда необходимо вставить штук 5-10 (сколько позволит размер самого объекта) изображений, так чтобы они не вылазили за границы данного PATH.

Можно вставлять внутрь контура, как другие svg, например 4-х лучевая звездочка

<svg width="160" height="160" viewBox="0 0 160 160" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M80 0C80 0 84.2846 41.2925 101.496 58.504C118.707 75.7154 160 80 160 80C160 80 118.707 84.2846 101.496 101.496C84.2846 118.707 80 160 80 160C80 160 75.7154 118.707 58.504 101.496C41.2925 84.2846 0 80 0 80C0 80 41.2925 75.7154 58.504 58.504C75.7154 41.2925 80 0 80 0Z" fill="#FFC700"/>
</svg>

Копируем path звезды внутрь секции <defs>, а затем клонируем её с помощью <use> и позиционируем с помощью координат X Y Попутно окрашиваем в нужный цвет копии звездочек

<use xlink:href="#star" x="120" y="100" fill="#FFC700" /> 
      <use xlink:href="#star" x="120" y="50" fill="crimson" /> 

Ниже полный код:

<svg xmlns:mapsvg="http://mapsvg.com" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" mapsvg:geoViewBox="14.122232 54.834941 24.149724 49.002699" preserveAspectRatio="xMidYMid meet" viewBox="0 0 612.75696 577.23169" style="transform: scale(1);">
   <defs>
     <path id="star" transform="scale(0.25)" d="M80 0C80 0 84.2846 41.2925 101.496 58.504C118.707 75.7154 160 80 160 80C160 80 118.707 84.2846 101.496 101.496C84.2846 118.707 80 160 80 160C80 160 75.7154 118.707 58.504 101.496C41.2925 84.2846 0 80 0 80C0 80 41.2925 75.7154 58.504 58.504C75.7154 41.2925 80 0 80 0Z" />
   </defs>
  <path d="m 11.786011,102.23195 4.79,0.56 -2.98,2.15 0.02,2.41 -3.55,-5.1 1.72,-0.02 z m 5.9,-0.18 0.57,1.34 -2.05,0.97 1.48,-2.31 z m -4.63,-1.01 1.72,1.45 -2.8,-0.02 1.08,-1.43 z m 2.18,-1.260004 -0.09,2.460004 -1.22,-1.71 1.31,-0.750004 z m -7.1799998,-4.24 1.81,-0.17 -2,2.57 5.5999998,9.490004 -7.6199998,-6.1 0.09,-3.460004 -1.78,-1.3 3.9,-1.03 z m 30.9699998,-4.48 -0.04,1.47 -3.22,0.32 0.43,-3.07 2.83,1.28 z m 0.62,-5.52 -4.4,2.66 0.06,5.87 -3.74,4.45 -2.78,9.590004 -1.28,-5.2 -8.61,-1.35 0.56,-4.000004 -0.68,1.87 -2.52,-0.83 -5.74,3.470004 0.82,-1.22 -2.8499998,-2.590004 1.7299998,-2.6 6.88,0.43 6.12,-4.69 16.43,-5.86 z m 119.649999,-57.14 2.81,8.19 2.93,1.21 1.44,3.33 0.42,7.69 -2.7,0.69 0.48,4.96 3.07,3.61 -0.67,2.34 -7.53,2.85 -0.96,2.11 5.46,10.1 -1.32,1.79 1.89,2.77 -1.23,4.1 0,0 -0.42,0.51 0,0 0.35,4.92 0,0 0.71,-0.06 0,0 0.76,-2.57 1.54,0.81 2.04,2.34 0.13,3.64 6.46,3.65 -0.81,3.420004 -4.65,-0.73 -1.34,1.29 -0.03,3.76 4.44,3.3 -5.27,5.36 2.17,9.18 0,0 -3.08,3.27 -1.17,-1.85 -4.3,2.2 -1.9,10.33 -4.41,3.6 -9.63,1.62 -2.23,-1.69 -0.45,1.15 1.68,8.48 1.84,-0.58 3.19,3.01 4.64,1.28 4.52,4.26 -4.91,4.04 0.59,5.45 -4.77,-2.09 -0.12,1.65 -1.7,-0.48 -1.12,4.71 -2.55,-0.77 -2.5,2.78 -1.29,-1.49 -1.18,4.39 -2.73,1.03 1.1,3.94 -3.58,3.48 0.74,1.03 -3.06,-0.79 -9.03,4.32 -9.45,-3.38 0,0 1.5,-6.34 -8.12,-1.94 0.43,2.35 -3.09,1.37 0.54,1.97 -2.52,0.51 1.68,2.15 -3.249999,1.32 0.989999,2.08 -2.289999,1.29 -2.41,-1.22 -2.64,2.23 -5.7,-3.19 -8.18,2.82 -3.33,3.79 -4.55,-1.01 2.15,6.48 -14.94,6.38 -2.21,-2.53 -2.56,1.8 -5.28,-4.38 -2.04,2.75 2.05,1.91 -3.88,1.21 0.78,3.01 -3.97,3.2 -3.25,11.53 -2.26,1.44 -4.71,-2.56 -2.09,1.77 0.07,3.59 0,0 -8.33,-5.51 -6.87,-8.95 -8.1299998,-6.62 -5.84999998,-2.23 2.30999998,-4.67 -1,-7.74 12.1999998,-9.21 2.6,-9 -0.63,-5.94 4.31,-6.45 -2.39,-4.63 -3.31,-18.78 -2.83,-5.34 0.58,-7.55 -2,-1.76 -1.0999998,-6.51 2.5899998,-0.63 -1.39,-4.04 2.84,0.9 4.64,5.65 5.85,1.22 5.74,7.4 1.33,-6.18 -2.96,-0.14 -1.95,-4.79 1.67,-6.2 3.01,-0.49 -0.56,-5.58 2.74,-7.540004 4.41,-4.58 2.15,1.58 0.27,-4.75 1.42,-0.4 -1.34,-2.03 2.44,-3.69 -4.76,0.78 34.65,-12.91 12.57,-2.06 21.299999,-7.6 15.15,-3.38 10.18,-8.13 15.9,-19.6 12.32,-3.16 z" title="Zachodniopomorskie" id="PL-ZP" class=" mapsvg-region" style="fill: rgba(255, 255, 255, 0); stroke: rgb(0, 186, 159); stroke-width: 0.623143px;"></path>
     <use xlink:href="#star" x="120" y="100" fill="#FFC700" /> 
      <use xlink:href="#star" x="120" y="50" fill="crimson" /> 
       <use xlink:href="#star" x="85" y="75" fill="yellowgreen" />
        <use xlink:href="#star" x="95" y="135" fill="purple" /> 
         <use xlink:href="#star" transform="scale(0.5)" x="155" y="235" fill="dodgerblue" /> 
            
</svg>
</svg>

Update

Растровое изображение в SVG path можно добавить с помощью <image>
Так как изображение изначально имеет большие размеры,
пришлось сильно уменьшить его : transform="scale(0.05)" x="600" y="3000"

<svg xmlns:mapsvg="http://mapsvg.com" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" mapsvg:geoViewBox="14.122232 54.834941 24.149724 49.002699" preserveAspectRatio="xMidYMid meet" viewBox="0 0 612.75696 577.23169" style="transform: scale(1);">
   <defs>
     <path id="star" transform="scale(0.25)" d="M80 0C80 0 84.2846 41.2925 101.496 58.504C118.707 75.7154 160 80 160 80C160 80 118.707 84.2846 101.496 101.496C84.2846 118.707 80 160 80 160C80 160 75.7154 118.707 58.504 101.496C41.2925 84.2846 0 80 0 80C0 80 41.2925 75.7154 58.504 58.504C75.7154 41.2925 80 0 80 0Z" />
   </defs>
  <path d="m 11.786011,102.23195 4.79,0.56 -2.98,2.15 0.02,2.41 -3.55,-5.1 1.72,-0.02 z m 5.9,-0.18 0.57,1.34 -2.05,0.97 1.48,-2.31 z m -4.63,-1.01 1.72,1.45 -2.8,-0.02 1.08,-1.43 z m 2.18,-1.260004 -0.09,2.460004 -1.22,-1.71 1.31,-0.750004 z m -7.1799998,-4.24 1.81,-0.17 -2,2.57 5.5999998,9.490004 -7.6199998,-6.1 0.09,-3.460004 -1.78,-1.3 3.9,-1.03 z m 30.9699998,-4.48 -0.04,1.47 -3.22,0.32 0.43,-3.07 2.83,1.28 z m 0.62,-5.52 -4.4,2.66 0.06,5.87 -3.74,4.45 -2.78,9.590004 -1.28,-5.2 -8.61,-1.35 0.56,-4.000004 -0.68,1.87 -2.52,-0.83 -5.74,3.470004 0.82,-1.22 -2.8499998,-2.590004 1.7299998,-2.6 6.88,0.43 6.12,-4.69 16.43,-5.86 z m 119.649999,-57.14 2.81,8.19 2.93,1.21 1.44,3.33 0.42,7.69 -2.7,0.69 0.48,4.96 3.07,3.61 -0.67,2.34 -7.53,2.85 -0.96,2.11 5.46,10.1 -1.32,1.79 1.89,2.77 -1.23,4.1 0,0 -0.42,0.51 0,0 0.35,4.92 0,0 0.71,-0.06 0,0 0.76,-2.57 1.54,0.81 2.04,2.34 0.13,3.64 6.46,3.65 -0.81,3.420004 -4.65,-0.73 -1.34,1.29 -0.03,3.76 4.44,3.3 -5.27,5.36 2.17,9.18 0,0 -3.08,3.27 -1.17,-1.85 -4.3,2.2 -1.9,10.33 -4.41,3.6 -9.63,1.62 -2.23,-1.69 -0.45,1.15 1.68,8.48 1.84,-0.58 3.19,3.01 4.64,1.28 4.52,4.26 -4.91,4.04 0.59,5.45 -4.77,-2.09 -0.12,1.65 -1.7,-0.48 -1.12,4.71 -2.55,-0.77 -2.5,2.78 -1.29,-1.49 -1.18,4.39 -2.73,1.03 1.1,3.94 -3.58,3.48 0.74,1.03 -3.06,-0.79 -9.03,4.32 -9.45,-3.38 0,0 1.5,-6.34 -8.12,-1.94 0.43,2.35 -3.09,1.37 0.54,1.97 -2.52,0.51 1.68,2.15 -3.249999,1.32 0.989999,2.08 -2.289999,1.29 -2.41,-1.22 -2.64,2.23 -5.7,-3.19 -8.18,2.82 -3.33,3.79 -4.55,-1.01 2.15,6.48 -14.94,6.38 -2.21,-2.53 -2.56,1.8 -5.28,-4.38 -2.04,2.75 2.05,1.91 -3.88,1.21 0.78,3.01 -3.97,3.2 -3.25,11.53 -2.26,1.44 -4.71,-2.56 -2.09,1.77 0.07,3.59 0,0 -8.33,-5.51 -6.87,-8.95 -8.1299998,-6.62 -5.84999998,-2.23 2.30999998,-4.67 -1,-7.74 12.1999998,-9.21 2.6,-9 -0.63,-5.94 4.31,-6.45 -2.39,-4.63 -3.31,-18.78 -2.83,-5.34 0.58,-7.55 -2,-1.76 -1.0999998,-6.51 2.5899998,-0.63 -1.39,-4.04 2.84,0.9 4.64,5.65 5.85,1.22 5.74,7.4 1.33,-6.18 -2.96,-0.14 -1.95,-4.79 1.67,-6.2 3.01,-0.49 -0.56,-5.58 2.74,-7.540004 4.41,-4.58 2.15,1.58 0.27,-4.75 1.42,-0.4 -1.34,-2.03 2.44,-3.69 -4.76,0.78 34.65,-12.91 12.57,-2.06 21.299999,-7.6 15.15,-3.38 10.18,-8.13 15.9,-19.6 12.32,-3.16 z" title="Zachodniopomorskie" id="PL-ZP" class=" mapsvg-region" style="fill: rgba(255, 255, 255, 0); stroke: rgb(0, 186, 159); stroke-width: 0.623143px;"></path>
     <use xlink:href="#star" x="120" y="100" fill="#FFC700" /> 
      <use xlink:href="#star" x="120" y="50" fill="crimson" /> 
       <use xlink:href="#star" x="85" y="75" fill="yellowgreen" />
        <use xlink:href="#star" x="95" y="135" fill="purple" /> 
         <use xlink:href="#star" transform="scale(0.5)" x="155" y="235" fill="dodgerblue" />  
         
         <image transform="scale(0.05)" x="600" y="3000" xlink:href="https://klike.net/uploads/posts/2019-05/1556708032_1.jpg"  />
            
</svg>

3
  • Можете подсказать можно ли вместо просто закрашенных звездочек туда вставить прям изображения с помощью ссылок? Мне просто надо именно картинки вставить. 31 янв 2022 в 13:23
  • @ВластелинНичего да, можно сейчас дополню ответ. Может вы дадите свою ссылку на картинку и я её вставлю 31 янв 2022 в 13:24
  • Мне не прям важно какую-то именно картинку. Скажем для теста можно использовать это - klike.net/uploads/posts/2019-05/1556708032_1.jpg. Спасибо Вам большое за ответ, думаю это мне очень поможет. Вообще цель стоит чтобы из базы выводить картинки внутрь данной области, думаю еще как бы автоматически можно было их позиционировать внутри этого PATH, чтобы они не вылазили за его границы. Но думаю если не разберусь как автоматически, то хоть вручную добавлю данные точки или может можно точки заранее задать и просто внутрь них выводить картинки. В любом случае огромное спасибо. 31 янв 2022 в 13:27

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.