CODEWITHSUNDEEP
svgd3.js
user2483724
user2483724

Reputation: 2119

SVG is invisible but exists in DOM

I have a bunch of line elements created with D3 but the strange thing is that they're appearing in the DOM and when I mouseover them I see it being highlighted but there isn't anything there, everything is just blank. The code somewhat looks like this and the CSS has some weird webkit-transform-origin stuff. Does anyone know what is wrong? (screenshot of issue: https://i.sstatic.net/cMoPy.jpg)

<div>
<svg width="1000" height="700">
<line x1="420" y1="470" x2="394.9078930250818" y2="369.0723716341295" id="id-1" style="stroke-    width: 10px; color: red;"></line>
</svg>
</div>

-webkit-transform-origin-x: 0px;
-webkit-transform-origin-y: 0px;
-webkit-transform-origin-z: initial;

Upvotes: 3

Views: 7164

Answers (3)

rluks
rluks

Reputation: 2862

I had same problem. Tried to set stroke-width - did not help. Fixed it with correct x position of the element.

Upvotes: 0

lincb
lincb

Reputation: 632

You need to change color to stroke. For instance:

<line x1="420" y1="470" x2="394.9078930250818" y2="369.0723716341295" id="id-1" style="stroke-width: 10px; stroke: red;"></line>

Upvotes: 2

Amadan
Amadan

Reputation: 198556

color doesn't do anything. Set stroke instead. At the moment, all of your lines are getting rendered with no stroke at all, which makes them invisible.

Upvotes: 3

Related Questions