Quiero compensar el elemento SVG en relación con su propio tamaño usando traducir con porcentaje, de manera muy similar a cómo funcionaría compensar div usando transform: translate(100%,0) :

este código:

 <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>

se verá así bien, el desplazamiento del círculo era relativo a su propio tamaño

mientras que este caso:

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

hará que esto rinda:

Básicamente, se está compensando en relación con el tamaño del lienzo svg (que nunca configuré explícitamente):

¿Por qué transform: 'translate(100%,0)' funciona en relación con uno mismo en elementos div html pero en relación con el padre en elementos SVG?

ya probado:

• envolviendo elementos g , o elementos svg similares a otras respuestas en este sitio.

quiero evitar:

• Podría resolver esto potencialmente usando la función .getbBox() y calcular las dimensiones manualmente y guardarlo en el estado y luego compensarlo por píxeles, pero realmente quiero evitarlo y estoy buscando una solución más simple.

Manifestación

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