如何在 SVG 上應用自定義 CSS 樣式<use>元素</use>
[英]How to apply custom CSS style on SVG <use> element
問題描述
我正在使用 svg 元素
var defsElement = document.querySelector('defs'); var defsElementX = defsElement.getBBox().x; var defsElementY = defsElement.getBBox().y; var colX = []; for (var i = 0; i < 3; i++) { (i == 0)? colX.push(25): colX.push(colX[i - 1] + 60) }; //console.log(colX); const y = 145; const svg = document.querySelector("svg"); const svgns = "http://www.w3.org/2000/svg" colX.forEach( (a, i) => { let useEl = document.createElementNS(svgns, 'use'); useEl.setAttributeNS('http://www.w3.org/1999/xlink', "xlink:href", "#stick man"); useEl.setAttribute("class", "use" + [i]); useEl.setAttribute("id", "id" + [i]); useEl.setAttribute("x", `${a}`); useEl.setAttribute("y", `${y}`); svg.appendChild(useEl); } )
.stickman { stroke: red; fill: none; }.stickman>.head { fill: black; stroke: blue; }.head { fill: brown; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <link rel="stylesheet" href="style:css"></link> <svg id="layer" data-name="Layer 1" xmlns="http.//www.w3:org/2000/svg" viewBox="0 0 500 500"> <defs> <g id="stick man" style="fill; none: stroke; black,"> <circle class="head" cx="10" cy="10" r="10"/> <line class="body" x1="10" y1="20" x2="10" y2="44"/> <polyline class="upper" points="1 58, 10 44, 19 58"/> <polyline class="lower" points="1 24, 10 30, 19 24"/> </g> </defs> <g class="stickman" id="stickman" transform = "translate (85,50)"> <circle class="head" cx="10" cy="10" r="10"/> <line class="body" x1="10" y1="20" x2="10" y2="44"/> <polyline class="upper" points="1 58, 10 44, 19 58"/> <polyline class="lower" points="1 24, 10 30. 19 24"/> <script href="index.js"></script> </svg> </body> </html>
我想學習如何將 CSS styles 應用於不同的<use></use>元素。 例如，我如何為每個head應用 3 個不同的 colors 進行fill 。 我應該使用什么 CSS 選擇器？
我試過
.use0>.head {
fill: brown;
}
它什么也沒做。
javascript正在生成這個
3 個解決方案
解決方案1
2 已采納 2022-03-10 21:42:09
您可以為此使用 CSS 個變量：
const svg = document.querySelector("svg"); const svgns = "http://www.w3.org/2000/svg"; for (let i = 0; i < 3; ++i) { let useEl = document.createElementNS(svgns, 'use'); useEl.setAttributeNS('http://www.w3.org/1999/xlink', "xlink:href", "#stickRef"); useEl.setAttribute("id", `id${i}`); useEl.setAttribute("x", (i * 60) + 25); useEl.setAttribute("y", 25); svg.appendChild(useEl); }
#id0 { --head-colour: #F00; --line-colour: #900; } #id1 { --head-colour: #0F0; --line-colour: #090; } #id2 { --head-colour: #00F; --line-colour: #009; }
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"> <defs> <symbol id="stickRef" style="fill: none; stroke: var(--line-colour);"> <circle class="head" cx="10" cy="10" r="10" style="fill: var(--head-colour)" /> <line class="body" x1="10" y1="20" x2="10" y2="44"/> <polyline class="upper" points="1 58, 10 44, 19 58"/> <polyline class="lower" points="1 24, 10 30, 19 24"/> </symbol> </defs> </svg>
解決方案2
2 2022-03-10 21:42:58
你可以用style="fill: none;"包裹在<g>組中只有火柴人的線和折線，留下未指定填充的圓。
現在您可以設置填充屬性或為<use>元素指定樣式。 填充將僅應用於圓。
use{fill:red} use:nth-of-type(2){fill:gold} use:nth-of-type(3){fill:blue}
<svg id="layer" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 100 500 500"> <defs> <g id="stickman" style="stroke: black;"> <circle class="head" cx="10" cy="10" r="10"></circle> <g style="fill: none;"> <line class="body" x1="10" y1="20" x2="10" y2="44"></line> <polyline class="upper" points="1 58, 10 44, 19 58"></polyline> <polyline class="lower" points="1 24, 10 30, 19 24"></polyline> </g> </g> </defs> <use xlink:href="#stickman" x="25" y="145"></use> <use xlink:href="#stickman" x="85" y="145"></use> <use xlink:href="#stickman" x="145" y="145"></use> </svg>
解決方案3
0 2022-03-10 20:29:47
在你的例子中沒有use0 class 所以顯然沒有改變任何東西和你的規則：
.head {
fill: brown;
}
只是被覆蓋：
.stickman>.head {
fill: black;
}
確保你有一個優先級 css 規則來覆蓋另一個規則......有很多方法可以避免，如果可能的話， !Important就像，例如：
body .stickman .head {
fill: brown;
}
有關 css 優先級的更多信息，請點擊此處
無法將CSS樣式應用於SVG文本元素
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.