CODEWITHSUNDEEP
csssvg
sanchez
sanchez

Reputation: 4530

How can I fit svg path to certain px size without javascript

<div style="width:40px;
            height:40px;
            background: #333333;
            margin: 10px;">

    <svg version="1.1" 
         xmlns="http://www.w3.org/2000/svg" 
         width="40" 
         height="40" 
         style="width:40px; 
         height:40px;" 
         viewBox="0 0 40 40" 
         preserveAspectRatio="none">

         <g transform="translate(20, 20)">
             <path fill="#FF0000" stroke="none" d="M-10,-10h20v20h-20z"></path>
         </g>
</svg>
</div>

Please see this jsfiddle: http://jsfiddle.net/Fz4rc/

The first path is too small, the second path is too large.

I have looked into few related questions on SO. I have tried playing with viewBox, preserveAspectRatio, width, height.

How can I get both paths to fit 40px size (either svg or div) without measuring the BBox in javascript? Is it possible?

Upvotes: 2

Views: 1919

Answers (1)

user3786597
user3786597

Reputation: 380

the width and height attributes of an SVG container define the size of the container. The viewBox attribute defines the part of the SVG drawing that will be visible in the container. To get both paths fitting 40px size, you need to set width and height to 40px and set the parameters of viewBox such that the rectangle it defines contains the whole shape. If you do not know the size of your shape initially, i think you can not avoid the use of getBBox() or other similar stuff. Your demo with corrected values : http://jsfiddle.net/Fz4rc/1/

Upvotes: 4

Related Questions