css - 在 HTML/CSS 中为内联 SVG 内的组设置变换原点?
问题描述
目标:
背景使用内联 SVG,因为我想:hover
在模式的某些元素上添加效果。每个圆圈 ( .item
) 都应该围绕它的中心旋转,这样圆圈就不会真正移动,但是带有间隙和较小圆圈的 3/4 圆圈会在视觉上旋转。
问题:
我将每个的变换原点设置为.item
,center center
但这会将原点置于<svg>
元素的中心。因此,只有最中间.item
的部分正确旋转,因为它确实位于<svg>
元素的中心。
有什么方法可以将它们设置为transform-origin
每个的中心,.item
而不必为每个:nth-child?
我计划可能有 50 个圆圈的人手动设置它们,因此如果有一种方法可以让我不必手动设置它们,那就太好了。
我的方法首先正确吗?或者使用 JS/jQuery 有更好的解决方案吗?
代码:
// BG TEST
// bg filled for better visibility
.bg {
fill: #000;
}
.icon {
fill: #D6D6D6;
}
.item:hover {
animation: rotate-icon 1s infinite linear;
transform-origin: center;
}
@keyframes rotate-icon {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
<html>
<div class="testing-box">
<svg version="1.1" id="test-bg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" width="152" height="152">
<g class="item">
<rect class="bg" x="114.6" width="37.2" height="37.2"/>
<path class="icon" d="M133.2,34.1c-8.5,0-15.5-7-15.5-15.5s7-15.5,15.5-15.5s15.5,7,15.5,15.5S141.7,34.1,133.2,34.1z
M133.2,4.1c-8,0-14.5,6.5-14.5,14.5s6.5,14.5,14.5,14.5s14.5-6.5,14.5-14.5S141.2,4.1,133.2,4.1z"/>
</g>
<g class="item">
<rect class="bg" width="37.2" height="37.2"/>
<path class="icon" d="M18.6,34.1c-8.5,0-15.5-7-15.5-15.5S10,3.1,18.6,3.1s15.5,7,15.5,15.5S27.1,34.1,18.6,34.1z
M18.6,4.1c-8,0-14.5,6.5-14.5,14.5s6.5,14.5,14.5,14.5s14.5-6.5,14.5-14.5S26.6,4.1,18.6,4.1z"/>
</g>
<g class="item">
<rect class="bg" x="57.3" width="37.2" height="37.2"/>
<path class="icon" d="M75.9,3.1c-8.2,0-15,6.5-15.5,14.6c-1.8,0.2-3.1,1.7-3.1,3.5c0,1.9,1.6,3.5,3.5,3.5s3.5-1.6,3.5-3.5
c0-1.7-1.2-3.2-2.9-3.4c0.5-7.6,6.8-13.6,14.5-13.6c8,0,14.5,6.5,14.5,14.5s-6.5,14.5-14.5,14.5v1c8.5,0,15.5-7,15.5-15.5
S84.4,3.1,75.9,3.1z M63.3,21.1c0,1.4-1.1,2.5-2.5,2.5s-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5S63.3,19.8,63.3,21.1z"/>
</g>
<g class="item">
<rect class="bg" x="114.6" y="57.3" width="37.2" height="37.2"/>
<path class="icon" d="M133.2,91.4c-8.5,0-15.5-7-15.5-15.5s7-15.5,15.5-15.5s15.5,7,15.5,15.5S141.7,91.4,133.2,91.4z
M133.2,61.4c-8,0-14.5,6.5-14.5,14.5s6.5,14.5,14.5,14.5s14.5-6.5,14.5-14.5S141.2,61.4,133.2,61.4z"/>
</g>
<g class="item">
<rect class="bg" x="57.3" y="57.3" width="37.2" height="37.2"/>
<path class="icon" d="M75.9,91.4c-8.5,0-15.5-7-15.5-15.5s7-15.5,15.5-15.5s15.5,7,15.5,15.5S84.4,91.4,75.9,91.4z
M75.9,61.4c-8,0-14.5,6.5-14.5,14.5s6.5,14.5,14.5,14.5s14.5-6.5,14.5-14.5S83.9,61.4,75.9,61.4z"/>
</g>
<g class="item">
<rect class="bg" x="57.3" y="114.6" width="37.2" height="37.2"/>
<path class="icon" d="M75.9,148.7c-8.5,0-15.5-7-15.5-15.5s7-15.5,15.5-15.5s15.5,7,15.5,15.5S84.4,148.7,75.9,148.7z
M75.9,118.7c-8,0-14.5,6.5-14.5,14.5s6.5,14.5,14.5,14.5s14.5-6.5,14.5-14.5S83.9,118.7,75.9,118.7z"/>
</g>
<g class="item">
<rect class="bg" y="114.6" width="37.2" height="37.2"/>
<path class="icon" d="M18.6,148.7c-8.5,0-15.5-7-15.5-15.5s7-15.5,15.5-15.5s15.5,7,15.5,15.5S27.1,148.7,18.6,148.7z
M18.6,118.7c-8,0-14.5,6.5-14.5,14.5s6.5,14.5,14.5,14.5s14.5-6.5,14.5-14.5S26.6,118.7,18.6,118.7z"/>
</g>
<g class="item">
<rect class="bg" x="114.6" y="114.6" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 266.3807 4.868558e-06)" width="37.2" height="37.2"/>
<path class="icon" d="M148.7,133.2c0-8.2-6.5-15-14.6-15.5c-0.2-1.8-1.7-3.1-3.5-3.1c-1.9,0-3.5,1.6-3.5,3.5
s1.6,3.5,3.5,3.5c1.7,0,3.2-1.2,3.4-2.9c7.6,0.5,13.6,6.8,13.6,14.5c0,8-6.5,14.5-14.5,14.5s-14.5-6.5-14.5-14.5h-1
c0,8.5,7,15.5,15.5,15.5S148.7,141.7,148.7,133.2z M130.6,120.6c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5
S132,120.6,130.6,120.6z"/>
</g>
<g class="item">
<rect class="bg" y="57.3" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 37.1911 151.7859)" width="37.2" height="37.2"/>
<path class="icon" d="M18.6,91.4c8.2,0,15-6.5,15.5-14.6c1.8-0.2,3.1-1.7,3.1-3.5c0-1.9-1.6-3.5-3.5-3.5s-3.5,1.6-3.5,3.5
c0,1.7,1.2,3.2,2.9,3.4c-0.5,7.6-6.8,13.6-14.5,13.6c-8,0-14.5-6.5-14.5-14.5s6.5-14.5,14.5-14.5v-1c-8.5,0-15.5,7-15.5,15.5
S10.1,91.4,18.6,91.4z M31.2,73.3c0-1.4,1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5s-1.1,2.5-2.5,2.5S31.2,74.7,31.2,73.3z"/>
</g>
</svg>
</div>
</html>
解决方案
以防万一有人偶然发现这个问题有同样的问题:感谢@Paulie_D 的评论,这很容易解决。
所需要的只是以下 CSS:
.item { transform-box: fill-box; }
推荐阅读
- java - E/RecyclerView:没有附加适配器;跳过布局 D/OpenGLRenderer: eglDestroySurface = 0x730c9a02d0
- javascript - 用户离开页面/刷新时跟踪表单更改
- node.js - 对Node js的两个括号功能感到困惑
- python - 如何修复 Python 在 MySQL 数据库中输入错误的值
- bash - 如何使用 gawk 将文本包装在列中
- android - 是否必须将 ListView.Builder 小部件放置在单独的页面上
- javascript - 在 setInterval 中调用函数会导致本机反应错误
- excel - DAX 测量 (PowerBI) 用于“过滤和提取”某些温度范围
- c# - 使用指定数量的内存时抛出异常
- python - 如何将“”作为参数传递给 subprocess.check_call?