2016-12-01 2 views
3

Я пытаюсь добавить какое-то фоновое изображение к SVG узлам «круг».Добавление изображения в круги SVG

Я прочитал много ответов stackoverflow, и все говорят, что нам нужно добавить узел в определение нашего изображения.

Я пробовал это, но мое изображение вообще не отображается.

Это сценарий моего кода: https://jsfiddle.net/baapu6wz/.

Что я пропустил?

<svg baseProfile="full" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="390" width="1629"> 
<g transform="translate(40,0)"> 
    <g> 
     <line y2="149.3060251652327" x2="819.8567597731511" y1="222.22245513917517" x1="854.7332277213098" style="stroke: #999;" stroke-width="5"></line> 
     <line y2="213.47136779636722" x2="768.9096407109324" y1="213.47136779636722" x1="768.9096407109324" style="stroke: #999;" stroke-width="5"></line> 
     <line y2="213.47136779636722" x2="768.9096407109324" y1="149.3060251652327" x1="819.8567597731511" style="stroke: #999;" stroke-width="5"></line> 
    </g> 
    <g> 
     <g transform="translate(854.7332277213098, 222.22245513917517)"> 
      <circle fill="url(#image1);" fillOpacity="0.5" r="16"></circle> 
      <text x="20" dy="3">pagx</text> 
     </g> 
     <g transform="translate(768.9096407109324, 213.47136779636722)"> 
      <circle fill="url(#image1);" fillOpacity="0.5" r="10"></circle> 
      <text x="20" dy="3">xzreds</text> 
     </g> 
     <g transform="translate(819.8567597731511, 149.3060251652327)"> 
      <circle fill="url(#image1);" fillOpacity="0.5" r="14"></circle> 
      <text x="20" dy="3">jzkcwv</text> 
     </g> 
    </g> 
</g> 
<defs> 
    <pattern width="16" height="16" patternUnits="userSpaceOnUse" y="0" x="0" id="image1"> 
     <image xlink:href="https://www.google.fr/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" height="16" width="16" y="0" x="0"></image> 
    </pattern> 
</defs> 

ответ

2

У вас есть опечатка.

fill="url(#image1);" 

должен быть

fill="url(#image1)" 

Удалите точку с запятой.

https://jsfiddle.net/baapu6wz/1/

+0

Мое плохое, иногда нам просто нужно сделать перерыв .. Спасибо !! – Superdrac

Смежные вопросы