我正在使用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;
}
答案 0 :(得分:2)
这里有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;
}
&#13;
<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>
&#13;
只是一个想法...
您可以使用文字而不是svg。
button{
color:#656c75;
font: 1.5em "arial";
}
&#13;
<button
class="button button--plusButton"
data-ng-click="plus.toggleState()"
data-ng-class="{'is-checked':plus.state}">
+
</button>
&#13;
答案 1 :(得分:1)
只需两个猜测:
首先,我认为x和y不是CSS属性,而是HTML属性,所以 您应该将它们内嵌在HTML标记中。
其次,你的CSS规则没有被标签包裹(我想是的 只是因为你在这里贴了两个不同的文件部分而已 确保)
答案 2 :(得分:0)
通过CSS修改svg元素的x和y,可以使用
function hide_update_notice_to_all_but_admin_users()
{
if (!current_user_can('update_core')) {
remove_action( 'admin_notices', 'update_nag', 3 );
}
}
add_action( 'admin_head', 'hide_update_notice_to_all_but_admin_users', 1 );