我使用 HTML 中的纯 SVG 代码设计了一个三栏图标。我正在使用 CSS3 变换将顶部和底部的条形图旋转成 X 形。问题是它们围绕自己的中心旋转,但我需要它们围绕图标的中心旋转。为了解决这个问题,我调整了它们的 X/Y 坐标。
这会导致 Internet Explorer、Firefox 和 Safari 出现大量错误问题。 Chrome 似乎还不错,但显然我想以“正确”的方式对此进行编码,以便它可以在所有浏览器中运行。
HTML
<svg id="burgericon" xmlns="http://www.w3.org/2000/svg" width="90" height="80">
<g class="icon">
<rect class="frstbar" x="10" y="10" width="70" height="12" rx="7" ry="7" fill="#414141"/>
<rect class="scndbar" x="10" y="35" width="70" height="12" rx="7" ry="7" fill="#414141"/>
<rect class="thrdbar" x="10" y="60" width="70" height="12" rx="7" ry="7" fill="#414141"/>
</g>
</svg>
CSS
.hamburger { display:block; text-align:center; }
svg { cursor:pointer; }
.frstbar, .scndbar, .thrdbar {
-webkit-transition: all 0.35s linear;
-moz-transition: all 0.35s linear;
-o-transition: all 0.35s linear;
transition: all 0.35s linear;
}
#burgericon.open .frstbar {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
#burgericon.open .thrdbar {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#burgericon.open .scndbar { width: 0; opacity: 0; }
JS
$('#burgericon').on('click', function(e) {
if($(this).attr('class') != "open") {
$(this).attr('class','open');
$('.frstbar').attr('x','25').attr('y','-5');
$('.thrdbar').attr('x','-35').attr('y','55');
}
else {
$(this).attr('class','default');
$('.frstbar').attr('x','10').attr('y','10');
$('.thrdbar').attr('x','10').attr('y','60');
}
});
我还认为更改 X/Y 坐标会导致模糊效果。我在下面添加了一个屏幕截图。首先,您会看到完成的 X 图标,然后您会看到它恢复默认设置时的外观。
条形图不是完全笔直的,而是出于某种原因看起来是 flex 的。
我还是 SVG 操作的新手,所以我不确定如何正确旋转 <rect>
CSS3/JS 元素。任何正确方向的帮助或提示将不胜感激。
最佳答案
您可以使用 CSS 移除 JS 定位 transform-origin
property .您可以使用 transform-origin: 0 50%;
将其设置在第一条和第二条的左侧。
这样它们在旋转时会相互交叉:
document.getElementById('burgericon').addEventListener('click', function (e) {
this.classList.toggle('open');
});
.hamburger {
display: block;
text-align: center;
}
svg {
cursor: pointer;
}
.frstbar,.scndbar,.thrdbar {
transition: all 0.35s linear;
transform: rotate(0deg);
transform-origin: 0% 50%;
}
#burgericon.open .frstbar {
transform: rotate(45deg);
}
#burgericon.open .thrdbar {
transform: rotate(-45deg);
}
#burgericon.open .scndbar {
width: 0;
opacity: 0;
}
<nav class="hamburger">
<svg id="burgericon" xmlns="http://www.w3.org/2000/svg" width="90" height="80">
<g class="icon">
<rect class="frstbar" x="10" y="10" width="70" height="12" rx="7" ry="7" fill="#414141" />
<rect class="scndbar" x="10" y="35" width="70" height="12" rx="7" ry="7" fill="#414141" />
<rect class="thrdbar" x="10" y="60" width="70" height="12" rx="7" ry="7" fill="#414141" />
</g>
</svg>
</nav>
<div>
</div>
归功于 David Thomas对于 JS
请注意,transform-origin
属性需要与 transform
属性相同的 vendor 前缀。我在上面的代码片段中都省略了它们
关于javascript - 将 SVG 汉堡包图标旋转成 X?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30941833/