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

我正在使用svgs，我有兩個「rect」元素。他們有四個寬度，高度，x和y的CSS屬性。它在Chrome和Safari上運行良好，但在Firefox上x和y屬性不顯示。當我手動將它們添加到檢查器中時，在x和y屬性旁邊有一個帶有感嘆號的三角形，這意味着它無效。我很驚訝，因爲當我去Mozilla開發人員網站時，我可以看到這些是有效的屬性。由於根據Firefox瀏覽器，x和y無效，導致我的SVG無法呈現。我不確定我做錯了什麼。什麼是解決方法？Rect x和y屬性在Firefox中不起作用

<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; 
}

來源

2015-12-07 London804

你誤讀MDN文檔。它們是屬性，而不是CSS屬性。 SVG 2建議他們成爲屬性，但該規範尚未完成，Firefox尚未實現其中的一部分。 –

您這裏有2個問題纏繞。

X和Y不是有效的CSS屬性。
- 將它們移至內聯屬性。
您的SVG元素需要尺寸。
- 添加高度和寬度。

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>

來源

2015-12-07 21:40:07 apaul

只是個猜測：

首先，我認爲X和Y都不CSS屬性，但HTML屬性，因此你應該內嵌它們包括在HTML標籤。
其次，你的CSS規則不是標籤（我想這是只是因爲你粘貼文件的兩個不同部分在這裏只是確保）

來源

2015-12-07 21:03:17 Senthe

用於修改通過CSS中的SVG元素x和y，你可以使用

transform: translate(x,y) //to modify x and y axis 
transform: translateX(x) //to modify only x axis 
transform: translateY(y) //to modify only y axis

來源

2016-06-15 10:37:59 Arvin

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

回答

相關問題