用适当的viewBox值替换width和height属性

Question

This question is helpful in understanding the purpose of viewBox, but isn't quite the same.

The goal is to replace the width and height properties of an SVG element with a corresponding viewBox property. Our code requires viewBox to be set, and not width and height.

Is there an algorithmic way of doing this?

For instance, the SVG element below when replaced with a viewBox property of 0 0 6 6 does not look the same.

Original

 <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='6' height='6'> <rect width='6' height='6' fill='#eee'/> <g id='c'> <rect width='3' height='3' fill='#e6e6e6'/> <rect y='1' width='3' height='2' fill='#d8d8d8'/> </g> <use xlink:href='#c' x='3' y='3'/> </svg> 

Edited

 <svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox="0 0 6 6"> <rect width='6' height='6' fill='#eee'/> <g id='c'> <rect width='3' height='3' fill='#e6e6e6'/> <rect y='1' width='3' height='2' fill='#d8d8d8'/> </g> <use xlink:href='#c' x='3' y='3'/> </svg> 

Sandbox https://jsbin.com/micepar/embed?html,output

Answer 1

TL;DR: You can't, that's not what viewBox does.

An SVG canvas can be considered to be an infinite drawing surface. viewBox tells the browser which part should be visible. This visible area will be scaled and positioned to fit the element's content area. The defaults for viewBox are usually such that x and y are 0 while width and height match the element's pixel dimensions. However, viewBox does not change those dimensions.

An SVG element's height and width change the element's content area. The viewBox area is scaled to fit this content area. If height and width are not set, they will be some convenient size depending on browser implementation and are not dependent on viewBox even if they appear to be in certain situations.