英文:
How to scale svg size to exactly wrap its content?
问题
我有一个非常简单的SVG，里面有一个圆：
<div>
<svg className="main-svg">
<circle pathLength="25" cx="50%" cy="50%" r="25%" />
</svg>
</div>
然后，如果我对其进行样式化：
svg {
height: 250px;
width: 250px;
}
SVG 将占据 250px 的宽度和高度，但其中的圆将会小得多，因此圆周围会有不必要的空白空间。是否可以使SVG包装圆而不添加空白，以便定义SVG的宽度和高度将导致设置其中的圆的宽度和高度？
Stackblitz 链接：https://stackblitz.com/edit/react-ts-fwmjzn?file=style.css
英文:
I have a very simple svg with a circle inside:
<div>
<svg className="main-svg">
<circle pathLength="25" cx="50%" cy="50%" r="25%" />
</svg>
</div>
Then if I style it:
svg {
height: 250px;
width: 250px;
}
The svg will take up 250px width and height, but the circle inside it will be much smaller, so there's unwanted white space around the circle. Is it possible to make the svg wrap the circle without adding space, so that defining the width of height of the svg will result in setting the width and height of the circle inside it?
Stackblitz link: https://stackblitz.com/edit/react-ts-fwmjzn?file=style.css
答案1
得分: 2
将半径属性值设置为50%
<svg width="250" height="250" viewBox="0 0 250 250">
<circle pathLength="25" cx="50%" cy="50%" r="50%" />
</svg>
英文:
Set radius attribute value to 50%
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
svg {border: 2px solid red; }
<!-- language: lang-html -->
<svg width="250" height="250" viewBox="0 0 250 250">
<circle pathLength="25" cx="50%" cy="50%" r="50%" />
</svg>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论