如何设置从 <use /> 元素复制的 svg 元素的样式答案

【问题标题】：how to style svg element that is duplicated from the <use /> element如何设置从 <use /> 元素复制的 svg 元素的样式
【发布时间】：2018-09-08 16:52:22
【问题描述】：

我正在使用 svg <use /> 元素在多个位置复制图标：

<svg class="icon icon-BusinessUnit"><use xlink:href="#icon-BusinessUnit"></use></svg>

我希望能够控制图标的大小和颜色，但我不知道如何。

更改.icon-BusinessUnit 的填充、颜色、宽度和高度不会改变任何内容。

polygon,
rect {
  fill: transparent;
  stroke: #fff;
  stroke-width: 1;
}

g path {
  stroke: #fff;
  stroke-opacity: 0.6;
}

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}


/* ==========================================
Single-colored icons can be modified like so:
.icon-name {
  font-size: 32px;
  color: red;
}
========================================== */

.icon-Activity {
  width: 10.2001953125em;
}

.icon-BusinessUnit {
  width: 1.2001953125em;
}

.icon-SublevelBusinessFunction {
  width: 0.900390625em;
}

.icon-SublevelBusinessUnit {
  width: 0.533203125em;
}

html {
  font-size: 62.5%;
  overflow-y: scroll;
  position: relative;
  min-height: 100%;
  height: 100%;
}

body {
  box-sizing: border-box;
  font-family: Helvetica, Arial, sans-serif;
  line-height: 1;
  background: linear-gradient(#348dc5, #00435d);
}

*,
*:before,
*:after {
  box-sizing: border-box !important;
}

ul {
  padding: 0;
}

<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="#000000">
  <link rel="shortcut icon" href="/favicon.ico">
  <title>D3</title>
  <style type="text/css">
    /* break points */
    /* be consistent with spacing to avoid random pixel adding. */
  </style>
</head>

<body cz-shortcut-listen="true">
  <div id="root">
    <div class="gel-wrap">
      <div class="gel-layout">
        <div class="gel-layout__item      ">
          <div style="display: inline-block; position: relative; width: 100%; vertical-align: top; overflow: hidden;"><svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 1300 800"><g class="vx-group vx-cluster" transform="translate(100, 100)"><g class="vx-group" transform="translate(0, 0)"><g class="vx-group" transform="translate(490, 0)"><polygon points="25.98076211353316,-14.999999999999998 25.98076211353316,14.999999999999998 1.83697019872103e-15,30 -25.98076211353316,14.999999999999998 -25.980762113533157,-15.000000000000004 -5.510910596163089e-15,-30"></polygon><svg class="icon icon-BusinessUnit"><use xlink:href="#icon-BusinessUnit"></use></svg></g>
            </g>
            </g>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="http://localhost:8088/static/js/main.js"></script>
  <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <symbol id="icon-Activity">
      <title>Activity</title>
      <path fill="#fff" style="fill: var(--color1, #fff)" d="M0 26c0-3.314 2.686-6 6-6 0.176 0 0.352 0.010 0.524 0.024l6.45-10.75c-0.614-0.942-0.974-2.066-0.974-3.276 0-3.314 2.686-6 6-6s6 2.686 6 6c0 1.208-0.358 2.334-0.974 3.276l6.45 10.75c0.172-0.014 0.348-0.024 0.524-0.024 0.134 0 0.266 0.006 0.396 0.014l4.56 2.604c0.658 0.962 1.044 2.128 1.044 3.382 0 3.314-2.686 6-6 6s-6-2.686-6-6c0-1.208 0.358-2.334 0.974-3.276l-6.45-10.75c-0.172 0.014-0.348 0.024-0.524 0.024s-0.352-0.010-0.524-0.024l-6.45 10.75c0.614 0.942 0.974 2.066 0.974 3.274 0 3.314-2.686 6-6 6-3.314 0.002-6-2.684-6-5.998z"></path>
    </symbol>
    <symbol id="icon-BusinessUnit">
      <title>Business Unit</title>
      <path fill="#fff" style="fill: var(--color1, #fff)" d="M9.974 30.871h6.519v-6.666h3.918v6.666h6.519v-29.843h-16.955v29.843zM19.641 4.545h3.918v3.918h-3.918v-3.918zM19.641 10.842h3.918v3.918h-3.918v-3.918zM19.641 17.139h3.918v3.918h-3.918v-3.918zM13.344 4.545h3.918v3.918h-3.918v-3.918zM13.344 10.842h3.918v3.918h-3.918v-3.918zM13.344 17.139h3.918v3.918h-3.918v-3.918zM28.451 3.701h8.452v27.17h-5.935v-6.068h-2.517v-21.102zM33.835 21.936h-0v-3.567h-3.567v3.567h3.567zM33.835 16.203h-0v-3.567h-3.567v3.567h3.567zM33.835 10.47h-0v-3.567h-3.567v3.567h3.567zM0 30.871v-27.17h8.452v21.102h-2.517v6.068h-5.935zM3.068 6.903v3.567h3.567v-3.567h-3.567zM3.068 12.636v3.567h3.567v-3.567h-3.567zM3.068 18.369v3.567h3.567v-3.567h-3.567z"></path>
    </symbol>
    <symbol id="icon-SublevelBusinessFunction">
      <title>Sublevel Business Function</title>
      <path fill="#fff" style="fill: var(--color1, #fff)" d="M0.96 29.626h10.401v-9.503h6.252v9.503h10.401v-28.666h-27.053v28.666zM16.384 7.715h6.252v6.252h-6.252v-6.252zM6.337 7.715h6.252v6.252h-6.252v-6.252z"></path>
    </symbol>
    <symbol id="icon-SublevelBusinessUnit">
      <title>Sublevel Business Unit</title>
      <path fill="#fff" style="fill: var(--color1, #fff)" d="M0.561 30.314h6.318v-6.46h3.797v6.46h6.318v-28.924h-16.433v28.924zM9.93 4.798h3.797v3.797h-3.797v-3.797zM9.93 10.901h3.797v3.797h-3.797v-3.797zM9.93 17.004h3.797v3.797h-3.797v-3.797zM3.827 4.798h3.797v3.797h-3.797v-3.797zM3.827 10.901h3.797v3.797h-3.797v-3.797zM3.827 17.004h3.797v3.797h-3.797v-3.797z"></path>
    </symbol>
  </defs>
</svg>

</body>

</html>

【问题讨论】：

原始节点上的style 属性优先于您在使用级别设置的所有其他规则。但是您的 svg 已经为它做好了准备（您是否编写了它？）。您需要做的就是在您的use 上设置--color1 css 变量。但这假设您不是针对 IE 浏览器（不支持 css 变量）。此外，通过 css 设置宽度只是 SVG2 的一部分，尚未在所有浏览器中完全支持。我认为只有 Blink（也许还有 webkit 的？）支持这个新规范的这一部分。
Controlling SVG colors with CSS的可能重复

标签： html svg

【解决方案1】：

您的 HTML 和 SVG 结构非常复杂，因此我已将其简化到最低限度。您已在 PATH 上将填充硬编码为 #fff，这使得很难影响每个符号副本的填充颜色。也许您有充分的理由将 SVG 嵌套在其他 SVG 中，但正如您所见，没有必要达到您想要的结果。（我已删除 POLYGON 以进一步简化问题。）

这很有效，希望如您所愿：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <style>
    .d1{
      fill: red;
    }

    .d2{
      fill: green;
    }

    .d3{
      fill: orange;
    }
    </style>
    <symbol id="icon-BusinessUnit">
      <path d="M9.974 30.871h6.519v-6.666h3.918v6.666h6.519v-29.843h-16.955v29.843zM19.641 4.545h3.918v3.918h-3.918v-3.918zM19.641 10.842h3.918v3.918h-3.918v-3.918zM19.641 17.139h3.918v3.918h-3.918v-3.918zM13.344 4.545h3.918v3.918h-3.918v-3.918zM13.344 10.842h3.918v3.918h-3.918v-3.918zM13.344 17.139h3.918v3.918h-3.918v-3.918zM28.451 3.701h8.452v27.17h-5.935v-6.068h-2.517v-21.102zM33.835 21.936h-0v-3.567h-3.567v3.567h3.567zM33.835 16.203h-0v-3.567h-3.567v3.567h3.567zM33.835 10.47h-0v-3.567h-3.567v3.567h3.567zM0 30.871v-27.17h8.452v21.102h-2.517v6.068h-5.935zM3.068 6.903v3.567h3.567v-3.567h-3.567zM3.068 12.636v3.567h3.567v-3.567h-3.567zM3.068 18.369v3.567h3.567v-3.567h-3.567z"></path>
    </symbol>
  </defs>
  <use xlink:href="#icon-BusinessUnit" class="d1" transform="translate(0 0) scale(1)"/>
  <use xlink:href="#icon-BusinessUnit" class="d2" transform="translate(100 0) scale(1.5)"/>
  <use xlink:href="#icon-BusinessUnit" class="d3" transform="translate(200 0) scale(2)"/>
</svg>

以后，请缩写您提供的代码，以便我们可以专注于与您的问题相关的部分。最好包含一个 Codepen / Fiddle 或类似的东西，否则人们可能不会花时间为你设置一个。见https://codepen.io/MSCAU/pen/KxybQ。

【讨论】：