Question

我的HTML代码中有一个SVG对象（<svg>），坐标0,0位于元素的最左侧和最顶部。如何在不对代码进行任何其他更改的情况下使0,0成为元素的最左边和最底部，只更改SVG元素的属性/样式？

CODE：

<svg viewBox="0 0 15000 15000">...[HERE COMES THE VECTOR CONTENT]...</svg>

Answer 1

使用已应用transform的组围绕SVG的内容。变换应该是Y方向上的-1（垂直翻转）和翻译以将翻转的内容移回屏幕上。

然而请注意，正如罗伯特所说，文本和图像等元素现在最终会颠倒过来。因此，如果您需要使用这些元素，您需要对这些元素进行一次转换，以便以正确的方式将它们重新打开。

<svg viewBox="0 0 400 300">
  <g transform="translate(0,300) scale(1,-1)">

    <rect width="100%" height="100%" fill="#f8f8ff"/>
    <line x1="0" y1="0" x2="100" y2="100" stroke="red" stroke-width="5"/>
    
  </g>
</svg>

从SVG更改0,0

1 个答案: