javascript - How to make an SVG viewbox wide as its container? - Stack Overflow

admin管理员组

文章数量:1022997

I'm trying to figure out this, but having a lot of trouble:

    <div class="wrapper">
      <svg width="100%" height="100%" viewbox="0 0 100 100">
       <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
      </svg>
    </div>

How can I make it so that the viewbox coordinates stretch 100% in height & width, following the viewport coordinates of the svg element?

P.S. The wrapper is 100% wide and has a set height.

I'm trying to figure out this, but having a lot of trouble:

    <div class="wrapper">
      <svg width="100%" height="100%" viewbox="0 0 100 100">
       <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
      </svg>
    </div>

How can I make it so that the viewbox coordinates stretch 100% in height & width, following the viewport coordinates of the svg element?

P.S. The wrapper is 100% wide and has a set height.

• javascript
• css
• svg
• viewbox

Share Improve this question Follow asked May 1, 2018 at 17:45 Tamara JovicTamara Jovic 23911 gold badge33 silver badges44 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Just remove the 'height' and 'width' attributes from your SVG element.

 <div class="wrapper">
    <svg viewbox="0 0 100 100">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>
 </div>

https://jsfiddle/mhcp4qpy/

SVGs are a bit odd because they scale differently than most img elements. Most ppl 'overthink' it.

If you'd like the height to also fill the container 100% and never overflow, you can change the 'preserveAspectRatio' attribute on the SVG to make it so that it will distort beyond its original aspect ratio.

https://developer.mozilla/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

I'm trying to figure out this, but having a lot of trouble:

    <div class="wrapper">
      <svg width="100%" height="100%" viewbox="0 0 100 100">
       <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
      </svg>
    </div>

How can I make it so that the viewbox coordinates stretch 100% in height & width, following the viewport coordinates of the svg element?

P.S. The wrapper is 100% wide and has a set height.

I'm trying to figure out this, but having a lot of trouble:

    <div class="wrapper">
      <svg width="100%" height="100%" viewbox="0 0 100 100">
       <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
      </svg>
    </div>

How can I make it so that the viewbox coordinates stretch 100% in height & width, following the viewport coordinates of the svg element?

P.S. The wrapper is 100% wide and has a set height.

• javascript
• css
• svg
• viewbox

Share Improve this question Follow asked May 1, 2018 at 17:45 Tamara JovicTamara Jovic 23911 gold badge33 silver badges44 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

Just remove the 'height' and 'width' attributes from your SVG element.

 <div class="wrapper">
    <svg viewbox="0 0 100 100">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>
 </div>

https://jsfiddle/mhcp4qpy/

SVGs are a bit odd because they scale differently than most img elements. Most ppl 'overthink' it.

If you'd like the height to also fill the container 100% and never overflow, you can change the 'preserveAspectRatio' attribute on the SVG to make it so that it will distort beyond its original aspect ratio.

https://developer.mozilla/en-US/docs/Web/SVG/Attribute/preserveAspectRatio

本文标签： javascriptHow to make an SVG viewbox wide as its containerStack Overflow