SVG viewBox="0 0 100 100" 不会将我的路径缩放到 100%？

Question

我目前有一个只显示大约 50% 的 svg 路径。我怎样才能让它显示 100%？这是我的代码：

<div className="svgPathContainer">
   <svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
     <path d="M82 88L0 0H123V170H0L82 88Z" fill="#F9B300" />
  </svg>
</div>

我将 className="svgPath" 设置为：

.svgPathContainer{ 
  width: 100%;
  height: 100%;
}

这里还有一个仅显示 50% 的 svg 示例： https://codesandbox.io/s/svg-scaling-fff1q?file=/src/App.js:93-357

问题：为什么 svg 路径不能缩放到 .svgPathContainer 的 100%？

Answer 1

viewBox 就像 canvas 尺寸。因此，该视图框外的绘图将被剪裁。喜欢css溢出：隐藏。并且您的绘图的大小为宽度 123px 和高度 170px。因此，您必须将视图框更改为此值。检查我们的一些 docs.

如果您想保持 100 x 100 像素的视图框，您需要更改您的绘图元素大小（路径）。

视图框与比例无关。这只是 canvas 大小。内部 SVG 元素的具有宽度、高度和偏移量 (x y w h) 的矩形剪辑。而SVG标签的width和height属性是用来缩放渲染图的。

<div className="svgPathContainer">
   <svg width="100%" height="100%" viewbox="0 0 123 170" preserveAspectRatio="none">
     <path d="M82 88L0 0H123V170H0L82 88Z" fill="#F9B300" />
  </svg>
</div>

SVG viewBox="0 0 100 100" 不会将我的路径缩放到 100%？

SVG viewBox="0 0 100 100" wont scale my path to 100%?

css

svg

path

viewbox

reactjs