SVG-调试或绘制变换 - 原孔-HTML，CSS

发布于 2025-01-23 05:35:17 字数 1446 浏览 0 评论 0原文

我有一些奇怪的svg件可以使它们动画，问题是，它们是“ img-box风格”，所以当我将另一个放在另一个地方，旋转，转换为另一个地方等。 -origin 很重要。我手工使用猪并在获得猪后尝试捕获。但是...没有一两个。所以...

我需要“查看” svg的transform-origin点，我尝试使用:: after，添加anothers div div s或span s，它们继承并起作用，但不能用于SVG。最后，我尝试使用＆lt; circle＆gt;，但也不要继承，我不知道该怎么办。

有时，我需要将圆圈放在两个对象的中间，在另一个时间内，我需要将第一个无花果开始的位置可能开始，也许是x：10％y：60％。让我说我将转换放置：10％60％;，看看我在做什么。

body{margin:3rem;}
#svg-id{height: 75vh; background: rgb(216 86 228 / 25%);}

#svg-id g{
  /* transform-box: fill-box; */
  transform-origin: center; /* how i can 'see' the transform origin??? */
  /* animation: rotate 3s infinite linear; */
}

#svg-id g circle{
  fill: red;
  transform-origin: inherit; /* how inherit the transform origin??? */
}

@keyframes rotate{
  from{transform: rotate(0turn);}
  to  {transform: rotate(1turn);}
}

<div>

  <svg xmlns="http://www.w3.org/2000/svg" id="svg-id" viewBox="0 0 237.79 190.08">
    <g>
      <polygon points="12.21 129.77 40.5 150.42 136.21 115.91 44.66 90.08 12.21 129.77" />
      <polygon points="143.89 114.5 152.67 76.72 216.41 26.34 188.17 112.21 143.89 114.5" />
      <circle r=16 />
    </g>
  </svg>

</div>

原文

I have some strange pieces of svg for animate them, the problem is, them no are a 'img-box-style' so, when I put one in another, rotate, translate to another place, etc. know the transform-origin is important. I do it by hand using porcents and try-catch after I get them. But... there aren't one or two. So...

I need to 'see' the transform-origin point of a svg, I trying by using ::after, adding anothers divs or spans, them inherit and works but not for svg. Finally i try using a <circle> but also, don't inherit, i don't know what to do.

Sometimes I need to put the circle in the middle of the two objects, in another time I need to put where the first fig start maybe x: 10% y: 60%.
Lets said I put put transform : 10% 60%; and see what I doing.

body{margin:3rem;}
#svg-id{height: 75vh; background: rgb(216 86 228 / 25%);}

#svg-id g{
  /* transform-box: fill-box; */
  transform-origin: center; /* how i can 'see' the transform origin??? */
  /* animation: rotate 3s infinite linear; */
}

#svg-id g circle{
  fill: red;
  transform-origin: inherit; /* how inherit the transform origin??? */
}

@keyframes rotate{
  from{transform: rotate(0turn);}
  to  {transform: rotate(1turn);}
}

<div>

  <svg xmlns="http://www.w3.org/2000/svg" id="svg-id" viewBox="0 0 237.79 190.08">
    <g>
      <polygon points="12.21 129.77 40.5 150.42 136.21 115.91 44.66 90.08 12.21 129.77" />
      <polygon points="143.89 114.5 152.67 76.72 216.41 26.34 188.17 112.21 143.89 114.5" />
      <circle r=16 />
    </g>
  </svg>

</div>

分享到QQ

分享到微博