CODEWITHSUNDEEP
javascriptd3.js
Instinct
Instinct

Reputation: 2241

How to translate svg element itself?

I have having trouble translating the svg element.

Here is a sample of what I have

<svg transform="translate(500,150)">
   <g>
   </g>
</svg>

It seems that when I apply this translate, only the <g> gets translated. I have to extend the width of the svg big enough so that the <g> is still within the svg.

Is there a way to translate svg itself?

Upvotes: 0

Views: 217

Answers (1)

AmeliaBR
AmeliaBR

Reputation: 27544

If you want to move a top-level SVG around within an HTML page, you need to use CSS transform styles, including vendor prefixes and length units, not the SVG transform attribute.

<svg style="-webkit-transform:translate(500px,150px);transform:translate(500px,150px)">
   <g>
   </g>
</svg>

(or use a stylesheet instead of inline CSS)

If your SVG is a nested element (i.e., within a larger SVG), than the transform attribute should work.

If that doesn't answer your question, create a simple working example of what's happening and also try to more clearly explain what you want to happen.

Upvotes: 1

Related Questions