Question

我正在使用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;
}

Answer 1

这里有2个问题。

X和Y不是有效的css属性。
- 将它们移动到内联属性。
您的SVG元素需要维度。
- 添加高度和宽度。

＆＃13;

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。

＆＃13;

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;

Answer 2

只需两个猜测：

首先，我认为x和y不是CSS属性，而是HTML属性，所以您应该将它们内嵌在HTML标记中。
其次，你的CSS规则没有被标签包裹（我想是的只是因为你在这里贴了两个不同的文件部分而已确保）

Answer 3

通过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 );

Rect x和y属性在Firefox中不起作用

3 个答案: