svg 元素相对于其自身大小的偏移（使用变换）

Question

我想使用百分比转换来相对于其自身大小偏移 SVG 元素，这与使用 offset div 的transform: translate(100%,0)工作方式非常相似：

这段代码：

  <div style={{ overflow: 'visible', position: 'relative' }}>
    {/* rect */}
    <div style={{ height: 20, width: 20, background: 'black', position: 'absolute' }} />
    {/* circle */}
    <div
      style={{
        height: 20,
        width: 20,
        background: 'purple',
        borderRadius: '50%',
        position: 'absolute',
        transform: 'translate(100%,0)',
      }}
    />
  </div>

看起来像这样 很好，圆的偏移量是相对于它自己的大小的

而这种情况：

<svg overflow={'visible'}>
  <rect width={20} height={20} />
  <circle cx={10} cy={10} r="10" fill="purple" style={{ transform: 'translate(100%,0px)' }} />
</svg>

将导致渲染：

它基本上是相对于 svg 画布大小的偏移（我从未明确设置过）：

为什么transform: 'translate(100%,0)'在 div html 元素中相对于 self 工作，但在 SVG 元素上相对于父级工作？

已经尝试过：

• 包装g元素，或svg类似于本网站上其他答案的元素。

想要避免：

• 我可以通过使用 .getbBox() 函数来解决这个问题，并手动计算尺寸并将其保存到状态，然后按像素偏移，但我真的想避免它并正在寻找更简单的解决方案。

演示

https://codesandbox.io/s/svg-vs-div-transform-translate-o2ii7

Answer 1

您应该将变换框设置为填充框。对于 React，你使用驼峰式大小写，所以它看起来像这样：

style={{ transform: "translate(100%,0px)", transformBox: "fill-box" }}