Question

当我将viewBox更改为

print (metrics)
                           ts  self_top_ask_price  self_top_bid_price  both
0  2020-05-03 11:59:48.627436                 NaN             0.08331     1
1  2020-05-03 11:59:36.286763             0.08367             0.08331     1
2  2020-05-03 11:59:24.279036             0.08367                 NaN     1
3  2020-05-03 11:59:12.298755                 NaN                 NaN     0

如以下示例所示，SVG仍以其“原始”尺寸129x129（在500x500的空间内）呈现

为什么SVG内部的路径相对于viewBox没有按比例放大？

0 0 500 500

Answer 1

通过更改viewBox可以更改边界框，即svg元素内部的可用空间。如果需要更改图标的大小，请添加宽度。

//console.log(box.getBBox())

svg{border:solid; width:100px;}

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 125 125">
      <defs>
        <style>
          .cls-1{fill:#d9d9d9;}.cls-2{fill:#fff;}.cls-3{fill:#222221;}
        </style>
      </defs>
      <g id="box">
      <path class="cls-1" d="M420.94,366.76a62.55,62.55,0,1,0-62.54-62.55,62.55,62.55,0,0,0,62.54,62.55" transform="translate(-358.4 -241.67)" />
      <polygon class="cls-2" points="36.49 32.43 20.89 48.48 20.89 88.25 62.2 88.25 62.2 32.16 36.49 32.43" />
      <path class="cls-3" d="M394.31,271.33l-17.16,17.16v38.72a5.23,5.23,0,0,0,5.23,5.23h40.51V271.33Zm-.16,5.65v9a2.33,2.33,0,0,1-2.33,2.33h-9ZM419,328.57H382.38a1.37,1.37,0,0,1-1.36-1.36V290.27h10.8a4.27,4.27,0,0,0,4.26-4.27V275.21H419Z" transform="translate(-358.4 -241.67)" />
      <polygon class="cls-2" points="88.3 32.43 103.9 48.48 103.9 88.25 62.59 88.25 62.59 32.16 88.3 32.43" />
      <path class="cls-3" d="M447.58,271.33H419v61.11h40.51a5.23,5.23,0,0,0,5.23-5.23V288.49Zm.16,5.65,11.35,11.35h-9a2.33,2.33,0,0,1-2.33-2.33Zm11.77,51.59H422.88V275.21h22.93V286a4.27,4.27,0,0,0,4.26,4.27h10.79v36.94a1.35,1.35,0,0,1-1.35,1.36" transform="translate(-358.4 -241.67)" />
      <rect class="cls-3" x="62.08" y="20.66" width="0.93" height="79.11" />
      </g>
    </svg>

更改viewBox属性时，为什么我的SVG没有缩放

1 个答案: