CODEWITHSUNDEEP
htmlsvg
dagda1
dagda1

Reputation: 28790

how to style svg element that is duplicated from the <use /> element

I am using the svg <use /> element to duplicate an icon in multiple places:

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

I would like to be able to control the size of the icon and the color but I do not know how.

Changing the fill, color, width and height of .icon-BusinessUnit does not change anything.

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>

Upvotes: 0

Views: 1879

Answers (1)

MSC
MSC

Reputation: 3386

Your HTML and SVG structure are quite complex so I have simplified it down to the bare minimum. You had hardcoded the fill as #fff on the PATH which made it difficult to affect the fill color of each copy of the symbol. Perhaps you have a good reason to nest SVGs inside other SVGs but as you can see, it's not necessary to achieve your desired result. (I have removed the POLYGON to further simplify the issue.)

This works, hopefully as you intended:

<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>

In future please just abbreviate the code you're providing so that we can focus on the parts which are relevant to your question. And it's always good to include a Codepen / Fiddle or similar, otherwise people may not take the time to set up one for you. See https://codepen.io/MSCAU/pen/KxybQ.

Upvotes: 3

Related Questions