Не удается добавить элементы в свг динамически

254

22 февраля 2017, 22:34

Добавляю следующий код(пытаюсь добавить элемент в svg) но не получется,поясните как поправить

$("#vmap svg path").prepend('<defs><pattern id="img1" patternUnits="userSpaceOnUse" width="600" height="450"><image xlink:href="daisy-grass-repeating-background.jpg" x="0" y="0" width="600" height="450" /></pattern></defs>')
    $("#vmap svg path").each(function(i,e){
       $(e).attr("fill","url(#img1)")
    })
<div id="vmap">
  <svg>
      <path d="M5,50
             l0,100 l100,0 l0,-100 l-100,0
             M215,100
             a50,50 0 1 1 -100,0 50,50 0 1 1 100,0
             M265,50
             l50,100 l-100,0 l50,-100
             z"
          fill="url(#img1)" />
  </svg>
</div>

Answer 1

jQuery, к сожалению, не умеет создавать элементы SVG. Поэтому придется по старинке, через JS:

//Элементы заливки 
var pattern = makeSVG('pattern', { 
  id: 'img1', 
patternUnits:'userSpaceOnUse', 
  width: '600', 
  height: '450', 
  x: '0', 
  y: '0' 
}) 
 
var img1 = makeSVG('image', { 
  'href': 'https://placeimg.com/600/450/any', 
  width: '600', 
  height: '450', 
  x: '0', 
  y: '0' 
}) 
 
//добавляем defs, если его нет 
svg = $('#vmap svg')[0]; 
 
var defs = svg.querySelector('defs') || 
  svg.insertBefore(makeSVG('defs'), svg.firstChild); 
 
defs.appendChild(pattern); 
pattern.appendChild(img1); 
 
//настраиваем стиль  
$("#vmap svg path").each(function(i, e) { 
  $(e).attr("style", "fill:url(#img1)") 
}) 
 
//небольшая функция для упрощения жизни 
function makeSVG(tag, attrs) { 
  var el = document.createElementNS('http://www.w3.org/2000/svg', tag); 
  for (var k in attrs) 
    el.setAttribute(k, attrs[k]); 
  return el; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="vmap"> 
  <svg> 
 
      <path d="M5,50 
             l0,100 l100,0 l0,-100 l-100,0 
             M215,100 
             a50,50 0 1 1 -100,0 50,50 0 1 1 100,0 
             M265,50 
             l50,100 l-100,0 l50,-100 
             z" 
          style="fill:url(#img1)" /> 
  </svg> 
</div>