Блог

Я хочу смещать элемент SVG относительно его собственного размера, используя перевод в процентах, очень похоже на то, как transform: translate(100%,0) будет работать использование смещения div:

этот код:

   <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)' работает относительно себя в html-элементах div, но относительно родительских элементов SVG?

уже пробовал:

• элементы упаковки g или элементы, svg аналогичные другим ответам на этом сайте.

хотите избежать:

• Я мог бы потенциально решить эту проблему с помощью функции .getBBox (), вычислить размеры вручную и сохранить их в состояние, а затем компенсировать пикселями, но я действительно хочу избежать этого и ищу более простое решение.

ДЕМОНСТРАЦИЯ

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

Вы должны установить поле преобразования в поле заполнения. Для React вы используете верблюжий чехол, поэтому он выглядит так:

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