1

I need to have a complex graphic scale to 100% of the width of its container.

Here's my progress so far: http://jsfiddle.net/yT9YK/1/

<svg
    xmlns="http://www.w3.org/2000/svg"
    width="100%"
    height="100%"
    viewBox="0 0 100 100"
    preserveAspectRatio="xMinYMin">

I've tried various settings for preserveAspectRatio and an example I reference (here: How to make a <svg> element expand or contract to its parent container?) has the viewBox set to "0 0 1 1" which doesn't work with my example.

Thanks!

Community
  • 1
  • 1
Victor Diaz
  • 92
  • 1
  • 2
  • 12
  • 1
    did you consider using your svg file as a background image? It would be easier to handle its behavior related with the container. – pasine Dec 28 '13 at 16:38
  • No I haven't. I'm using this as a progress stepper and will get more complex plus it will need to be dynamic. http://www.designtickle.com/cdnmedia/2012/04/23-progress-steps-complete.png. Do you think this will still be feasible using the SVG as a background? – Victor Diaz Dec 28 '13 at 16:44
  • I went through these examples and tried the SVG as background with no success... https://developer.mozilla.org/en-US/docs/Web/CSS/Scaling_of_SVG_backgrounds – Victor Diaz Dec 28 '13 at 17:45
  • possible duplicate of [How to make svg scale?](http://stackoverflow.com/questions/19484707/how-to-make-svg-scale) – bjb568 Dec 28 '13 at 22:52
  • Possibly, except that the shape I'm trying to scale is not a triangle but a much more complex shape. I've tried some of the things in that link with no success. Been trying to figure this one out all day. At this point, I'm hoping someone updates the Fiddle =( – Victor Diaz Dec 28 '13 at 23:16

1 Answers1

2

I think the problem is in your viewbox settings.
You set 0 0 100 100, but this is not the size of your image.
Trying to change the values to the dotted image length, it seems to scale in the right way.
I am not sure this is your desired effect, but I created a jsfiddle to display the result.

Here is the code:

<svg
            xmlns="http://www.w3.org/2000/svg"
            width="100%"
            height="100%"
            viewBox="0 0 270 32"
            preserveAspectRatio="xMinYMin">
...
pasine
  • 11,311
  • 10
  • 49
  • 81