在CSS文件中嵌入SVG文本的填充屬性的奇怪行爲

我在HTML中使用內聯SVG代碼的CSS樣式存在問題。我有一個HTML頁面index.html，CSS文件style.css和SVG文件external.svg。在SVG文件中，我在符號標記中創建了幾個六角形對象。我僅將此文件用作svg對象的庫。在HTML文件中，我使用的是使用SVG文件中的對象的內聯SVG。而CSS文件應該改變HTML文件中某些內聯SVG文本的顏色。在CSS文件中嵌入SVG文本的填充屬性的奇怪行爲

這是來自HTML文件的內嵌SVG代碼示例。 <use ...>標籤從SVG文件導入對象。

<svg id="zab4text" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,300,300"> 
    <a xlink:href="https://www.google.com" xlink:title="google"> 
    <use xlink:href="external.svg#hex4" fill="none"/> 
    <text font-size="40" font-weight="bold" font-family="DejaVu Sans"> 
     <tspan x="55" y="105">first line</tspan> 
     <tspan x="55" y="150">second line</tspan> 
     <tspan x="75" y="230">third line</tspan> 
    </text> 
    </a> 
</svg>

用於樣式的這部分代碼的CSS是這樣的：

#zab4text { 
    width: 150px; 
    height: 150px; 
    fill: red; 
}

結果應該是在一個六角形紅色文本。六角形很好，但文字是黑色的。 fill屬性對文本沒有影響。

當我想要一個紅色的文本，我不得不直接給一個ID爲<text>標籤和樣式。然後它工作。

我在谷歌瀏覽器55中查看了一下發生了什麼事。當填充屬性用於示例中的svg標記時，我在檢查器中看到文本的填充顏色是從zab4text繼承的，但它沒有設置顏色。如果填充屬性是文本標籤，那麼這是他的填充顏色，它工作得很好。

它可能是谷歌瀏覽器中的一些錯誤？當我第一次打開HTML頁面時，顏色是紅色的，但是當我打開它指向的鏈接時，它將顏色更改爲黑色，並且我無法取回紅色。我試過它在Firefox 50和相同的行爲。

我知道谷歌鉻外部文件的行爲，我使用簡單的python3 web服務器sudo python3 -m http.server 80。

有人知道我在做什麼錯或問題在哪裏？

來源

2016-12-26 trinarSK

似乎工作正常：https：//codepen.io/anon/pen/gLNpav –

@Bram \ Vanroy：我看到黑色字母，在您的鏈接中不是紅色。 – trinarSK

好吧，顯然它只在谷歌鉻黑色。在Firefox中，它應該是紅色的。 – trinarSK

所以我找到了答案。線

<text font-size="40" font-weight="bold" font-family="DejaVu Sans">

應該

<text font-size="40" font-weight="bold" font-family="DejaVu Sans" fill="inherit">

那麼它會從<svg>標籤的顏色在我嘗試了所有的瀏覽器。

來源

2016-12-27 14:42:34 trinarSK

您應該將此報告給Chrome追蹤器。 –

我不確定這是一個錯誤。 'fill =「inherit」'屬性應該這樣做。 – trinarSK

顯然它是''標籤做的。沒有它，它按預期工作。 – trinarSK

在CSS文件中嵌入SVG文本的填充屬性的奇怪行爲

回答

相關問題