Question

我有一个多边形，好像它的枢轴点位于拐角处。我希望它在中间，以便我可以围绕它的中心旋转。

<svg id="scroll-icon" width="25" height="45" viewBox="0 0 27 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
    <g id="sc-romb" stroke="#1089C9">
      <polygon class="scroll-rotate" points="15 0 24 9 15.0009335 18 6 9" data-svg-origin="15 15" ></polygon>
      <polyline id="sc-arrow" points="28 16 14.9950568 29 2 16" data-svg-origin="15 22.5"></polyline>
    </g>
  </g>
</svg>

我尝试使用Transform-origin:center;，但是如果有人能在大多数浏览器中使用更好的解决方法，那么我会很高兴的。

我还尝试使用transform: fill-box;不能正常工作...

Answer 1

如果我对您的理解正确，那么您只是想要这个？

<div class="accordion" id="accordionExample">
               <div class="card">
                   <div class="card-body nav-item-box div-shadow" id="headingOne">
                     <h5>
                       <a data-toggle="collapse" data-parent="#accordionExample" href="#el1">First</a>
                       </h5>
                                </div>
                                <div id="el1" class="collapse show fade" aria-labelledby="headingOne" data-parent="#accordionExample">
                                    <div class="card-body">
                                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.<a href="https://www.fiverr.com/sunlimetech/design-and-fix-your-bootstrap-4-issues" class="ml-3" target="_blank"><strong>View More designs <i class="fa fa-angle-double-right"></i></strong></a>
                                    </div>
                                </div>
                            </div>
                            <div class="card">
                                <div class="card-body nav-item-box div-shadow" id="headingTwo">
                                    <h5>
                                        <a data-toggle="collapse" data-parent="#accordionExample" href="#el2">Second</a>
                                    </h5>
                                </div>
                                <div id="el2" class="collapse fade" aria-labelledby="headingTwo" data-parent="#accordionExample">
                                    <div class="card-body">
                                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.<a href="https://www.fiverr.com/sunlimetech/design-and-fix-your-bootstrap-4-issues" class="ml-3" target="_blank"><strong>View More designs <i class="fa fa-angle-double-right"></i></strong></a>
                                    </div>
                                </div>
                            </div>
                        </div>

body {
  text-align: center;
  padding: 2rem;
}

@keyframes rotatorooni {
  100% {
    transform: rotate(360deg);
  }
}

.scroll-rotate {
  transform-origin: 15px 9px;
  animation: rotatorooni 2s linear infinite;
}

除了问题是，在视觉上它不是很平滑，因为在该形状底部的下部中心连接点实际上不在中心。因此，您要么需要根据<svg id="scroll-icon" width="25" height="45" viewBox="0 0 27 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="sc-romb" stroke="#ff0000"> <polygon class="scroll-rotate" points="15 0 24 9 15.0009335 18 6 9" data-svg-origin="15 15" ></polygon> <polyline id="sc-arrow" points="28 16 14.9950568 29 2 16" data-svg-origin="15 22.5"></polyline> </g> </g> </svg>的正确性来调整图像，要么将其大小调整为可整除的大小，以便可以找到正确设置的高度和宽度为半像素大小的正确变换源就在那一点上，并使动画看起来很平滑。

希望这会有所帮助，欢呼起来。

更改多边形的枢轴点

1 个答案: