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

时间:2015-12-07 19:59:26

标签: css firefox svg

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

3 个答案:

答案 0 :(得分:2)

这里有2个问题。

  1. X和Y不是有效的css属性。
    • 将它们移动到内联属性。
  2. 您的SVG元素需要维度。
    • 添加高度和宽度。
  3. &#13;
    &#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;
    &#13;
    &#13;

    只是一个想法...

    您可以使用文字而不是svg。

    &#13;
    &#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;
    &#13;
    &#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 );