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!

5
  • 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, 2013 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. designtickle.com/cdnmedia/2012/04/…. Do you think this will still be feasible using the SVG as a background? Dec 28, 2013 at 16:44
  • I went through these examples and tried the SVG as background with no success... developer.mozilla.org/en-US/docs/Web/CSS/… Dec 28, 2013 at 17:45
  • possible duplicate of How to make svg scale?
    – bjb568
    Dec 28, 2013 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 =( Dec 28, 2013 at 23:16

1 Answer 1

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">
...
1
  • Exactly what I was looking for. First time using SVG with HTML 5 so not very familiar. Thanks! Dec 29, 2013 at 18:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.