Приложение jquery не работает с элементом SVG? - PullRequest
Новая
       49

Приложение jquery не работает с элементом SVG?

192 голосов
/ 04 сентября 2010

Предполагая это: 

<html>
<head>
 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript">
 $(document).ready(function(){
  $("svg").append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
 });
 </script>
</head>
<body>
 <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
 </svg>
</body>

Почему я ничего не вижу?

Ответы [ 14 ]

1 голос
/ 21 июня 2018

Я бы посоветовал использовать ajax и загрузить элемент svg с другой страницы. 

$('.container').load(href + ' .svg_element');

Где href - это местоположение страницы с svg.Таким образом, вы можете избежать любых нервных эффектов, которые могут возникнуть при замене html-содержимого.Кроме того, не забудьте развернуть svg после загрузки: 

$('.svg_element').unwrap();
0 голосов
/ 21 апреля 2018 
 var svg; // if you have variable declared and not assigned value.
 // then you make a mistake by appending elements to that before creating element    
 svg.appendChild(document.createElement("g"));
 // at some point you assign to svg
 svg = document.createElementNS('http://www.w3.org/2000/svg', "svg")
 // then you put it in DOM
 document.getElementById("myDiv").appendChild(svg)
 // it wont render unless you manually change myDiv DOM with DevTools

// to fix assign before you append
var svg = createElement("svg", [
    ["version", "1.2"],
    ["xmlns:xlink", "http://www.w3.org/1999/xlink"],
    ["aria-labelledby", "title"],
    ["role", "img"],
    ["class", "graph"]
]);
function createElement(tag, attributeArr) {
      // .createElementNS  NS is must! Does not draw without
      let elem = document.createElementNS('http://www.w3.org/2000/svg', tag);             
      attributeArr.forEach(element => elem.setAttribute(element[0], element[1]));
      return elem;
}
// extra: <circle> for example requires attributes to render. Check if missing.
0 голосов
/ 05 января 2018

Это работает для меня сегодня с FF 57: 

function () {
    // JQuery, today, doesn't play well with adding SVG elements - tricks required
    $(selector_to_node_in_svg_doc).parent().prepend($(this).clone().text("Your"));
    $(selector_to_node_in_svg_doc).text("New").attr("x", "340").text("New")
        .attr('stroke', 'blue').attr("style", "text-decoration: line-through");
}

Делает:

this SVG image as seen in Firefox 57

0 голосов
/ 12 декабря 2014

Более простой способ - просто сгенерировать SVG в строку, создать HTML-элемент-оболочку и вставить строку svg в HTML-элемент, используя $("#wrapperElement").html(svgString). Это прекрасно работает в Chrome и Firefox.

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...