CODEWITHSUNDEEP
javascriptcssreactjssvgtransform
Eliav Louski
Eliav Louski

Reputation: 5314

offset svg path element relative to its own size

I'm trying to offset svg path element using tranform:'tranlate(100%,0)' (while transformBox:'fill-box) but it seems that path elements does not offset the same way circle or rect does.

when offseting circle elements:

  <circle r="10" />
  <g style={{ transform: "translate(100%)", transformBox: "fill-box" }}>
    <circle r="10" fill="purple" />
  </g>

we will get the desired outcome: enter image description here

when doing the same with path(scaled so could be seen):

const PathSvg = ({ stroke = "black" }) => (
  <g transform="scale(10)">
    <path d="M 0 0 L 1 0.5 L 0 1 L 0.25 0.5 z" stroke={stroke} />
  </g>
);

<h2>svg path</h2>
<svg overflow={"visible"}>
  <PathSvg />
  <g style={{ transform: "translate(100%)", transformBox: "fill-box" }}>
    <PathSvg stroke="purple" />
  </g>
</svg>

we will get this enter image description here

I've also tried using different transformBox but none give the desired outcome.

why on the SVG path element does transform behave differently?

Demo

https://codesandbox.io/s/svg-path-vs-other-svgs-tranform-jdiym?file=/src/App.js

Upvotes: 0

Views: 493

Answers (1)

chrwahl
chrwahl

Reputation: 13163

This is getting close to working. The transform-box: stroke-box is definitely not working on <path>. Here I changed the stroke to fill.

<h2>svg path</h2>
<svg style="overflow: visible">
  <defs>
    <g id="path1" transform="scale(100)">
      <path d="M 0 0 L 1 0.5 L 0 1 L 0.25 0.5 z" />
    </g>
  </defs>
  <use href="#path1" fill="orange"/>
  <g style="transform: translate(100%, 0); transform-box: fill-box;">
    <use href="#path1" fill="purple"/>
  </g>
</svg>

Upvotes: 1

Related Questions