How to auto-scale

Question

Is it possible to scale the svg element (and all i's contents accordingly) without having clipping? I've tried scaling the svg to 100% width and height however the contents are being clipped.

The svg is generated via d3.js

HTML

<svg>
  <circle cx="50" cy="50" r="50" fill="red"></circle>
</svg>

CSS

svg {
  width: 100%;
}

It depends on the context, the HTML document where you put your svg. Some code (html/css) to show us ? — enguerranws, Oct 08 '14 at 09:52
Yes but we need the document HTML and CSS to see how you can do in your case. — enguerranws, Oct 08 '14 at 09:57
There's nothing more in your HTML, the whole document is only a svg tag ? — enguerranws, Oct 08 '14 at 10:01
yes, this is for example purposes, is it important right now? — Mia, Oct 08 '14 at 10:03
Yes, because if you use percentage, it means that it will depend on the width / height container. And as you can see, we don't know that information. — enguerranws, Oct 08 '14 at 10:04
it's ok, I want it to fully scale at this point. Regardless of the rest of the document, if a solution works, it works. — Mia, Oct 08 '14 at 10:05
You seem kinda rude for someone who need help and don't know basic html. — enguerranws, Oct 08 '14 at 10:08

enguerranws · Answer 1 · 2014-10-08T10:07:11.423

-1

Ohh ok, I get it :

<svg width="100" height="100">
  <circle cx="50" cy="50" r="50" fill="red"></circle>
</svg>

This means : width = 100px, not 100%. Same for circle attribute, cx="50" means coordinate X = 50px, not 50%.

What you can do :

HTML

<svg class="scaled-svg">
  <circle cx="50%" cy="50%" r="20%" fill="red"></circle>
</svg>

CSS

.scaled-svg {
  width: 100%;
  height: auto; /* or 100% but it can break the ratio */
}

With that code, the SVG will

edited Oct 08 '14 at 10:07

answered Oct 08 '14 at 10:00

enguerranws

8,087
8
49
97

it's not different than what I do there, did you test your solution? It also doesn't scale the content (just the container is scaled) http://cssdeck.com/labs/aawnlsfj – Mia Oct 08 '14 at 10:02
Because you putted coordinates with an absolute unit (px), instead of percents : http://cssdeck.com/labs/2wbcy8xh – enguerranws Oct 08 '14 at 10:06
d3.js unfortunately generates only pixels. – Mia Oct 08 '14 at 10:11
http://stackoverflow.com/questions/16351244/convert-result-to-percentage-in-d3 – enguerranws Oct 08 '14 at 10:12

How to auto-scale element and contents? (d3.js)

1 Answers1

How to auto-scale