как стилизовать элемент svg, который дублируется из элемента <use /> - PullRequest
Новая
       0

как стилизовать элемент svg, который дублируется из элемента <use />

0 голосов
/ 08 сентября 2018

Я использую элемент 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>

1 Ответ

0 голосов
/ 08 сентября 2018

Ваша структура HTML и SVG довольно сложна, поэтому я упростила ее до минимума. Вы жестко закодировали заливку как #fff в PATH, что затруднило влияние на цвет заливки каждой копии символа. Возможно, у вас есть веская причина вкладывать SVG в другие SVG, но, как вы видите, нет необходимости достигать желаемого результата. (Я удалил ПОЛИГОН, чтобы еще больше упростить проблему.)

Это работает, надеюсь, как вы и предполагали: 

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...