如何在 SVG 上应用自定义 CSS 样式<use>元素</use>
[英]How to apply custom CSS style on SVG <use> element
问题描述
I am working with an svg 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>
I want to learn how to apply CSS styles to different <use></use> element.我想学习如何将 CSS styles 应用于不同的<use></use>元素。 For example, how can I apply 3 different colors for fill for each of the head .例如，我如何为每个head应用 3 个不同的 colors 进行fill 。 What CSS selector should I use?我应该使用什么 CSS 选择器？
I tried like我试过
.use0>.head {
fill: brown;
}
It did not do anything.它什么也没做。
The javascript is generating this javascript正在生成这个
3 个解决方案
解决方案1
2 已采纳 2022-03-10 21:42:09
You can use CSS variables for this:您可以为此使用 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
You can wrap in a group <g> with style="fill: none;"你可以用style="fill: none;"包裹在<g>组中only the line and polylines of the stick man, leaving the circle with an unspecified fill.只有火柴人的线和折线，留下未指定填充的圆。
Now you can set a fill attribute or give a style to the <use> element.现在您可以设置填充属性或为<use>元素指定样式。 The fill will be applied only to the circle.填充将仅应用于圆。
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
In your example there's no use0 class so obviously is not changing anything and your rule:在你的例子中没有use0 class 所以显然没有改变任何东西和你的规则：
.head {
fill: brown;
}
is just overwritten by:只是被覆盖：
.stickman>.head {
fill: black;
}
Be sure you have a priority css rule to overwritte another rule... there's many ways for it avoiding, if possible, the !Important like, for example:确保你有一个优先级 css 规则来覆盖另一个规则......有很多方法可以避免，如果可能的话， !Important就像，例如：
body .stickman .head {
fill: brown;
}
a bit more info about css priorities here有关 css 优先级的更多信息，请点击此处
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.