如何更改 svg 图标的大小
[英]How to change the size of an svg icon
问题描述
Please see the snippet below.
请看下面的片段。 I have an svg icon whose width and height I've set to 80px each, however, the svg icon itself is not filling up that full size.我有一个 svg 图标，我将其宽度和高度分别设置为 80 像素，但是，svg 图标本身并没有填满整个尺寸。 How can I correctly adjust the size of an individual svg icon?如何正确调整单个 svg 图标的大小？ Thanks!谢谢！
svg { background: pink }
<svg width="80" height="80"> <rect width="24" height="24" fill="none" rx="0" ry="0"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM19.8 12C19.8 16.3078 16.3078 19.8 12 19.8C7.69218 19.8 4.2 16.3078 4.2 12C4.2 7.69218 7.69218 4.2 12 4.2C16.3078 4.2 19.8 7.69218 19.8 12ZM12 17C14.7614 17 17 14.7614 17 12C17 9.94968 15.7659 8.1876 14 7.41604V9.12734C14.9067 9.75982 15.5 10.8106 15.5 12C15.5 13.933 13.933 15.5 12 15.5C10.067 15.5 8.5 13.933 8.5 12C8.5 10.8106 9.09326 9.75982 10 9.12734V7.41604C8.2341 8.1876 7 9.94968 7 12C7 14.7614 9.23858 17 12 17ZM12 6C11.5582 6 11.2 6.35817 11.2 6.8V9.2C11.2 9.64183 11.5582 10 12 10C12.4418 10 12.8 9.64183 12.8 9.2V6.8C12.8 6.35817 12.4418 6 12 6Z" fill="#303131"/> </svg>1 个解决方案
解决方案1
2 已采纳 2020-04-23 01:13:43
I'm not certain what your SVG's original proportions were, but if you insert them to the last two parameters of the viewBox attribute on the <svg> tag, that'll give it something familiar to scale up to 80/80px from!我不确定你的 SVG 的原始比例是多少，但是如果你将它们插入到<svg>标签上viewBox属性的最后两个参数中，这会让它看起来很熟悉，可以放大到 80/80 像素！
(I've guessed at 24/24) （我猜是 24/24）
The value of the
viewBoxattribute is a list of four numbers:min-x,min-y,widthandheight.viewBox属性的值是四个数字的列表：min-x、min-y、width和height。 The numbers separated by whitespace and/or a comma, which specify a rectangle in user space which is mapped to the bounds of the viewport established for the associated SVG element (not the browser viewport).
(Emphasis mine) （强调我的）
svg { background: pink }
<svg width="80" height="80" viewBox="0 0 24 24"> <rect width="24" height="24" fill="none" rx="0" ry="0"/> <path fill-rule="evenodd" clip-rule="evenodd" d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM19.8 12C19.8 16.3078 16.3078 19.8 12 19.8C7.69218 19.8 4.2 16.3078 4.2 12C4.2 7.69218 7.69218 4.2 12 4.2C16.3078 4.2 19.8 7.69218 19.8 12ZM12 17C14.7614 17 17 14.7614 17 12C17 9.94968 15.7659 8.1876 14 7.41604V9.12734C14.9067 9.75982 15.5 10.8106 15.5 12C15.5 13.933 13.933 15.5 12 15.5C10.067 15.5 8.5 13.933 8.5 12C8.5 10.8106 9.09326 9.75982 10 9.12734V7.41604C8.2341 8.1876 7 9.94968 7 12C7 14.7614 9.23858 17 12 17ZM12 6C11.5582 6 11.2 6.35817 11.2 6.8V9.2C11.2 9.64183 11.5582 10 12 10C12.4418 10 12.8 9.64183 12.8 9.2V6.8C12.8 6.35817 12.4418 6 12 6Z" fill="#303131"/> </svg>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.