SVG заполнить тегом использования - PullRequest
Новая
       14

SVG заполнить тегом использования

6 голосов
/ 06 июня 2019

Я пытаюсь изменить цвет SVG, отображаемого на разных страницах, используя <svg id="logo-svg"><use xlink:href="#kmc-logo"></use></svg>.

Методы, которые я пробую, здесь: https://tympanus.net/codrops/2015/07/16/styling-svg-use-content-css/.

Это SVG symbol Я вытащил (сокращено до соответствующих частей): 

<svg xmlns="http://www.w3.org/2000/svg">
    <symbol id="kmc-logo" viewBox="0 0 151 151">
        <g id="logo">
            <g id="outer-circle">
                <path fill="none" stroke-linecap="round" stroke-linejoin="round" d="M11.51 ..."/>
            </g>
            <g id="ceramics">
                <path stroke="none" d="M39.47 ..."/>
            </g>
        </g>
    </symbol>
</svg>

У меня есть этот стиль в моей таблице стилей: 

#masthead > .content-width .site-branding .logo--white a #logo-svg {
    fill: #fff;
    stroke: #fff;
}

Цвет stroke здесь отлично работает для #outer-circle в SVG-файле shadow-dom'd выше, но заливка не работает на пути внутри #ceramics.

Может кто-нибудь пролить свет? Заранее спасибо!

EDIT : я обновил этот вопрос после того, как обнаружил, что проблема связана не со спецификой CSS, а с элементами стиля внутри svgs-dom-dom.

1 Ответ

0 голосов
/ 07 июня 2019

То, что вы сделали, кажется нормальным.Я воспроизвел это примерно ниже.Возможно, это поможет вам.

Если ваш «керамический» путь не отображается, возможно, с ним что-то не так.Но нам нужно это увидеть. 

body {
  background-color: blue;
}

.logo--white #logo-svg {
    fill: #fff;
    stroke: #fff;
}

.logo--yellow #logo-svg {
    fill: #ff0;
    stroke: #ff0;
}

div {
  width: 100px;
  height: 100px;
  margin: 20px;
}
<svg width="0" height="0">
  <symbol id="kmc-logo" viewBox="0 0 151 151">
    <g id="logo">
      <g id="outer-circle">
        <path fill="none" stroke-linecap="round" stroke-linejoin="round"
              stroke-width="10" 
              d="M 25,25 L 25,125"/>
      </g>
      <g id="ceramics">
        <path stroke="none"
              d="M 100,25 A 50,50 0 0 0 100,125 A 50,50 0 0 0 100,25 Z"/>
      </g>
    </g>
  </symbol>
</svg>

<div class="logo--white" viewBox="0 0 151 151">
  <svg id="logo-svg"><use xlink:href="#kmc-logo"></use></svg>
</div>

<div class="logo--yellow" viewBox="0 0 151 151">
  <svg id="logo-svg"><use xlink:href="#kmc-logo"></use></svg>
</div>
...