我正在使用svgs，并且有两个“ rect”元素。它们具有宽度，高度，x和y的四个css属性。它可以在Chrome和Safari上正常运行，但是在Firefox上，x和y属性不会显示。当我在检查器中手动添加它们时，在x和y属性旁边有一个带有感叹号的三角形，这意味着它无效。我对此感到惊讶，因为当我访问Mozilla开发人员网站时，可以看到它们是有效的属性。由于根据Firefox浏览器，x和y无效，这导致我的SVG无法呈现。我不确定自己在做什么错。解决方法是什么？
<button
class="button button--plusButton"
data-ng-click="plus.toggleState()"
data-ng-class="{'is-checked':plus.state}">
<svg viewBox="-7 9 24 24" xml:space="preserve">
<rect class="plusButton-topBar"/>
<rect class="plusButton-bottomBar"/>
</svg>
</button>
.plusButton-topBar {
x: 4px;
y: 16.5px;
width: 2px;
height: 9px;
}
.plusButton-bottomBar {
x: 0.5px;
y: 20px;
width: 9px;
height: 2px;
}
.plusButton-topBar, .plusButton-bottomBar {
fill: #656c75;
-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
transform: matrix(1, 0, 0, 1, 0, 0);
transition: all 0.218s ease;
}
您在这里有2期。
button svg { /*add dimensions*/
height: 20px;
width: 20px;
}
.plusButton-topBar {
/*x: 4px;
y: 16.5px; Move these */
width: 2px;
height: 9px;
}
.plusButton-bottomBar {
/*x: 0.5px;
y: 20px; and these*/
width: 9px;
height: 2px;
}
.plusButton-topBar, .plusButton-bottomBar {
fill: #656c75;
-webkit-transform: matrix(1, 0, 0, 1, 0, 0);
transform: matrix(1, 0, 0, 1, 0, 0);
transition: all 0.218s ease;
}<button class="button button--plusButton" data-ng-click="plus.toggleState()" data-ng-class="{'is-checked':plus.state}">
<svg viewBox="-7 9 24 24" xml:space="preserve">
<rect x="4" y="16.5" width="2" height="9" class="plusButton-topBar" />
<rect x="0.5" y="20" width="9" height="2" class="plusButton-bottomBar" />
</svg>
</button>只是一个想法...
您可以使用文本而不是svg。
button{
color:#656c75;
font: 1.5em "arial";
}<button
class="button button--plusButton"
data-ng-click="plus.toggleState()"
data-ng-class="{'is-checked':plus.state}">
+
</button>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句