CODEWITHSUNDEEP
javascripthtmlsvgd3.js
user3649110
user3649110

Reputation: 79

svg elements being clipped

Snip 1

Snip 2

Snip 3

Does anyone know why the behavior displayed in the above images might be occurring? In the first image, the x and y coordinates of the svgArcs container are set to zero so the center is in the top left corner and only the bottom right corner is displayed, as expected. In the second image, I moved the container, but still only the bottom right corner is displayed. I posted the document structure so maybe you can take a look and tell me what's going on.

Upvotes: 2

Views: 277

Answers (1)

Robert Longson
Robert Longson

Reputation: 124014

By default <svg> elements clip their contents.

You could specify overflow="visible" on them or alternatively (and better) use a <g> element as a container rather than an <svg> element. You'll still need to keep the outermost SVG element an <svg> element.

Upvotes: 1

Related Questions