如何在元素的僞元素之前添加svg作爲內容：

我試圖在內容的:before僞元素中使用svg。如何在元素的僞元素之前添加svg作爲內容：

爲此，我正在關注此問題：Is there a way to use SVG as content in a pseudo element :before or :after但我無法使其工作。

我只是有一個簡單的SVG：

<svg height="100" width="100"> 
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> 
</svg>

這裏是我曾嘗試：

例1：插入SVG的內容屬性

#square{ 
 
    background-color: green; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
#square:before{ 
 
    display: block; 
 
    content: url("data:image/svg+xml;charset=UTF-8,<svg height='100' width='100'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red' /></svg>"); 
 
    background-size: 28px 28px; 
 
    height: 28px; 
 
    width: 28px; 
 
}

<div id="square"></div>

例2：使用base64編碼

#square{ 
 
    background-color: green; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
#square:before{ 
 
    display: block; 
 
    content: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjEwMCIgd2lkdGg9IjEwMCI+PGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDAiIHN0cm9rZT0iYmxhY2siIHN0cm9rZS13aWR0aD0iMyIgZmlsbD0icmVkIiAvPjwvc3ZnPg=="); 
 
    background-size: 28px 28px; 
 
    height: 28px; 
 
    width: 28px; 
 
}

<div id="square"></div>

正如你所看到的，任何這些例子不工作，所以我敢肯定，我失去了一些東西。

我做錯了什麼？

在此先感謝！

來源

2017-08-15 Francisco Romero

它可能需要一個實際的URL。在鉻它抱怨說它不是一個有效的URL。將該內容製作爲像content.svg這樣的SVG文件，並鏈接到URL中的內容，它應該可以工作。 – Deckerz

@Deckerz我試過使用'content：url（「data：image/svg + xml; charset = UTF-8，content.svg」）;'還有'content：url（「content.svg」）;'但是這些方法都沒有奏效。 –

@Deckerz好吧，Niloct給了我我失蹤的線索。看來我錯過了強制性屬性。 –

看起來像SVG標記需要更多的屬性。

#square{ 
 
    background-color: green; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 

 
#square:before{ 
 
    display: block; 
 
    content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='100' width='100'><circle cx='50' cy='50' r='40' stroke='black' stroke-width='3' fill='red' /></svg>"); 
 
    background-size: 28px 28px; 
 
    height: 28px; 
 
    width: 28px; 
 
}

<div id="square"></div>

來源

2017-08-15 10:40:10 Niloct

非常感謝你！添加'xmlns ='http：//www.w3.org/2000/svg'version ='1.1''似乎是線索！ –

不客氣:) – Niloct

如何在元素的僞元素之前添加svg作爲內容：

回答

相關問題