所以我有一個容器和viewBox的寬度和高度,不能改變這些東西我唯一能做的就是給這個組件一個路徑
目前,由于尺寸太大,SVG 現在正在其容器中進行調整
我可以通過路徑更改 SVG 的縱橫比/大小嗎?
示例代碼
<svg viewBox="-2 -3 24 24" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: inline-block; vertical-align: middle;"><path fill="#3E3E3E" d="M18.438 19.102a11 11 0 0 1-18.4-7.184c-.042-.504.372-.915.878-.915.507 0 .912.411.963.915a9.16 9.16 0 0 0 5.793 7.623A9.168 9.168 0 0 0 17.749 17.2h-2.663a.917.917 0 1 1 0-1.832h4.269a.917.917 0 0 1 .916.916v4.264a.916.916 0 0 1-1.833 0V19.1v.002ZM4.248 4.807H6.91a.917.917 0 1 1 0 1.832H2.64a.917.917 0 0 1-.917-.916V1.455a.916.916 0 0 1 1.833 0v1.448a11 11 0 0 1 18.407 7.184c.041.505-.373.915-.88.915-.505 0-.911-.411-.962-.915a9.161 9.161 0 0 0-5.794-7.623A9.168 9.168 0 0 0 4.249 4.807h-.002Z"></path></svg>

再次實作目標:使 SVG 適合這個 viewBox 和寬度高度。
uj5u.com熱心網友回復:
不,你不能。您必須更改 SVG 路徑以適合該框,但您不能“調整大小”本身。
我手動調整了您的路徑以適合該框。
<path fill="#3E3E3E" d="M1.2 3.3H4a1 1 0 1 1 0 1.8H.6a1 1 0 0 1-.9-.9V0a1 1 0 0 1 1.9 0v1.4A11 11 0 0 1 20 8.6c0 .5-.4.9-1 .9a1 1 0 0 1-.9-1A9.2 9.2 0 0 0 12.3 1a9.2 9.2 0 0 0-10 2.3ZM17.4 16.1A11 11 0 0 1-1 8.9c0-.5.4-.9 1-.9.4 0 .8.4.9 1a9.2 9.2 0 0 0 5.8 7.5 9.2 9.2 0 0 0 10-2.3h-2.6a1 1 0 1 1 0-1.8h4.3a1 1 0 0 1 .9.9v4.2a1 1 0 0 1-1.9 0v-1.4Z"></path>
我是怎么做到的:
我精確地使用了 svgomg:1,將路徑簡化到一個足夠小的點,讓我可以實際手動編輯。
然后我將它分成兩個單獨的路徑(頂部和底部箭頭)(使用
Z作為路徑分隔符),將它們包裹起來<g transform="translate(x, y)"></g>直到看起來正確,將剩余部分復制回 svgomg 中,它足夠聰明,可以將轉換轉換為單個路徑.
uj5u.com熱心網友回復:
您可以設定(使用和)的transform屬性:<path>scaletranslate
document.querySelector('path').setAttribute('transform', 'scale(0.9)')
例如,請參見片段:
document.querySelector('path').setAttribute('transform', 'scale(0.9)')
<svg viewBox="-2 -3 24 24" width="30px" height="30px" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: inline-block; vertical-align: middle;"><path fill="#3E3E3E" d="M18.438 19.102a11 11 0 0 1-18.4-7.184c-.042-.504.372-.915.878-.915.507 0 .912.411.963.915a9.16 9.16 0 0 0 5.793 7.623A9.168 9.168 0 0 0 17.749 17.2h-2.663a.917.917 0 1 1 0-1.832h4.269a.917.917 0 0 1 .916.916v4.264a.916.916 0 0 1-1.833 0V19.1v.002ZM4.248 4.807H6.91a.917.917 0 1 1 0 1.832H2.64a.917.917 0 0 1-.917-.916V1.455a.916.916 0 0 1 1.833 0v1.448a11 11 0 0 1 18.407 7.184c.041.505-.373.915-.88.915-.505 0-.911-.411-.962-.915a9.161 9.161 0 0 0-5.794-7.623A9.168 9.168 0 0 0 4.249 4.807h-.002Z"></path></svg>
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/451926.html
上一篇:為什么背景顏色隱藏邊框?[復制]
下一篇:如何使用Css交換元素位置?
