All geek questions in one place

SVG added to the DOM using javascript is not displayed.

I have an SVG file that I checked by opening it in an image viewer.

I tried to add this SVG to the HTML file using javascript code

d3.xml("assets/abc.svg", function(xml) {
   document.body.appendChild(xml.documentElement);
});

I am checking the HTML source and I can see that SVG is added to the HTML. But SVG is not displayed on the page. Any idea what could be the reason?

Note:

  • D3 is working fine.
  • SVG is valid.
  • SVG is added to the DOM structure inside the body. ''
  • Not displayed in both chrome and firefox.
+4
source share
2 answers

It works fine for me in IE / FF / CH. I have a valid svg, with the following in my root svg:

<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
...>

, , , svg . , , svg , display = "none" viewBox

+1

HTML- , "" Chrome dev svg "display" (), "", "", "" () "" ( > 0). -, ( ), , DOM node "". , - / SVG.

, "fill" "stroke" svg.

0

Source: https://habr.com/ru/post/1532814/

More articles:


All Articles