Question

我有这个SVG

<svg height="210" width="400" viewBox="0 0 100 100">
<path d="M150 0 L75 200 L225 200 Z"/></svg>

我想使用CSS更改viewBox属性。它可能看起来像这样。但是我试过了，但是行不通。

.svg {
  viewBox: "100 100 100 100";
}

我认为这可能是不可能的，但我想知道我的下一个最佳选择是以一种简洁的方式进行替换。

Answer 1

看来您在错误地解决问题。在您的情况下，像您所做的那样更改viewBox等效于简单地转换内部路径，这是您可以使用CSS进行的操作：

svg:first-of-type path {
  transform:translate(-100px,-100px);
}

<svg height="210" width="400" viewBox="0 0 100 100">
<path d="M150 0 L75 200 L225 200 Z" fill="red"/></svg>

<svg height="210" width="400" viewBox="100 100 100 100">
<path d="M150 0 L75 200 L225 200 Z" fill="red"/></svg>

我可以使用CSS替换SVG viewBox属性吗？

1 个答案: