Как добавить изображение в подсказку в SVG? - PullRequest
Новая
       37

Как добавить изображение в подсказку в SVG?

0 голосов
/ 27 сентября 2018

Попытка ссылки на изображение во всплывающей подсказке в карте SVG.Ссылка следующая: 

<path
 inkscape:connector-curvature="0"
 id="BD"
 data-info="<div>Bangladesh</div><div><img src="http://www.digi4health.org/wp-content/uploads/2018/09/bd.png" alt="Bangladesh mHealth" width="600" height="171"></div><div>Some Description</div>"
 data-name="Bangladesh"
 data-id="BD"
 d="m 1486.5,431.9 -4.5,-10.1 -1.5,0.1 -0.2,4 -3.5,-3.3 1.1,-3.6 2.4,-0.4 1.6,-5.3 -3.4,-1.1 -5,0.1 -5.4,-0.9 -1.2,-4.4 -2.7,-0.4 -4.8,-2.7 -1.2,4.3 4.6,3.4 -3.1,2.4 -0.8,2.3 3.7,1.7 -0.4,3.8 2.6,4.8 1.6,5.2 2.2,0.6 1.7,0.7 0.6,-1.2 2.5,1.3 1.3,-3.5 -0.9,-2.6 5.1,0.2 2.8,3.7 1.5,3.1 0.8,3.2 2,3.3 -1.1,-5.1 2.1,1 -0.5,-4.6 z"
 style="fill:#c1f4ff;fill-rule:evenodd" />

У меня есть карта мира SVG, в которую я добавил несколько описаний во всплывающем окне с информацией о моем проекте.В настоящее время на инфобоксе у меня просто есть текст.Я пытаюсь включить некоторые картинки в всплывающую информационную панель.

Здесь я делюсь полным кодом для лучшего понимания.Цените вашу поддержку.

1 Ответ

0 голосов
/ 27 сентября 2018

Ваш код неверен, и я не совсем уверен, о чем вы спрашиваете.Посмотрите на следующий пример и скажите мне, если это то, что вам нужно: 

<svg viewbox = "1450 400 50 50">
  <clipPath id="Bangladesh">   

<path d="m 1486.5,431.9 l-4.5,-10.1 -1.5,0.1 -0.2,4 -3.5,-3.3 1.1,-3.6 2.4,-0.4 1.6,-5.3 -3.4,-1.1 -5,0.1 -5.4,-0.9 -1.2,-4.4 -2.7,-0.4 -4.8,-2.7 -1.2,4.3 4.6,3.4 -3.1,2.4 -0.8,2.3 3.7,1.7 -0.4,3.8 2.6,4.8 1.6,5.2 2.2,0.6 1.7,0.7 0.6,-1.2 2.5,1.3 1.3,-3.5 -0.9,-2.6 5.1,0.2 2.8,3.7 1.5,3.1 0.8,3.2 2,3.3 -1.1,-5.1 2.1,1 -0.5,-4.6 z"
 />
    </clipPath>
  
  
  <image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/darwin300.jpg" x="1450" y="400" height="50" width="50" clip-path="url(#Bangladesh)"/>
</svg>

Я не смог использовать ваше изображение, поскольку оно получено с http (небезопасно).

...