0

I have a viewBox on my svg element. I simply wish for it to scale the svg to scale if the browser screen has been made smaller. However, if I try to set the width & height for my svg symbol also it STOPS scaling.

    var svg = d3.select("#svgpath").append("svg:svg") 
                .attr("viewBox", "0 0 1000 730")
                .attr("width", "900")
                .attr("height", "650")
                .attr("preserveAspectRatio", "xMinYMin meet")
                .append("svg:g")
                .attr("transform", "translate(500,430)");

Could anyone tell me why is behaves normally without width & height. I wish to have a set width & height.

thanks

Jose
  • 587
  • 2
  • 6
  • 21
  • If you set width and height, they are fixed, so the SVG won't scale because it won't change size. What do you want here? You want the interior image to scale but the frame size to be fixed? – nrabinowitz Jul 02 '13 at 23:14
  • Hi thanks for the reply. I want the image to scale like this example: http://jsfiddle.net/qCarc/2/ . As I need the width & height in order to convert the svg to image using canvg. It seems if I dont have a width or height on the svg the canvg says its too big. – Jose Jul 02 '13 at 23:23
  • Have you tried temporarily setting the width and height when you convert it? – Erik Dahlström Jul 03 '13 at 08:10
  • @ErikDahlström No i have not. Do you have an example by any chance? – Jose Jul 03 '13 at 14:48

1 Answers1

0

With the code you have specified, what the renderer will do is scale down the portion of your SVG document from (0,0 - 1000,730) to fit inside the rectangular viewport 900x650. Is that what you intended? It is not exactly clear from your description.

To check, save the following equivalent SVG and open it in a browser.

<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     width="900" height="650" 
     viewBox="0 0 1000 730"
     preserveAspectRatio="xMinYMin meet">
  <g>
     <ellipse cx="500" cy="365" rx="500" ry="365"/>
   </g>
</svg>

The ellipse will be 900 pixels wide and 650 pixels high. It will stay that size as long as width and height are set to those values.

However I suspect what you may have actually intended to do is scale the SVG to fit inside the "#svgpath" element (which I am guessing is a <div>(?)). If that's what you want, then what you should do instead is set width and height to "100%" instead.

Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
  • However, when I use viewBox in IE9. It doesnt work at all, is that a known issue or not? – Jose Jul 03 '13 at 17:26