Заполнение всех цветов с использованием CSS / js из SVG - PullRequest
Новая
       5

Заполнение всех цветов с использованием CSS / js из SVG

0 голосов
/ 20 мая 2018

Я пытаюсь установить цвет заливки фигуры из внешнего svg, на который я ссылаюсь внутри документа HTML, поэтому я использую CSS / JS для стиля.

В настоящее время я могу толькочтобы заставить работать, но заливка кажется переопределенной.Любая помощь будет принята с благодарностью 

<svg style="fill:green" viewBox="0 0 1000 1000">
<!--        <image id="one" xlink:href="sears/alt1/body/willis-body.svg#body-windows-left" x="54.5" y="338"/>-->
<use style="fill:orange" class="icon" xlink:href="sears/alt1/body/willis-body.svg#body-windows-left" transform="translate(50 50)"/>
<use style="fill:orange" class="icon" xlink:href="sears/alt1/body/willis-body.svg#body-windows-left" transform="translate(350 50)"/>
</svg>

<style>
/*
    #svg {
        fill: none;
    }
*/


    use.icon:hover {
        stroke: teal;
        width: 100px;
        fill: orange !imporant;
    }

</style>

1 Ответ

0 голосов
/ 20 мая 2018

Когда вы собираетесь использовать <use>, он принимает только копию вашего <circle> объекта, как вы видите фрагмент кода, вы можете стилизовать <circle>, и в то же время это повлияет на <use>

#circle:hover {
  fill: blue;
}
<svg viewBox="0 0 1000 1000">
  <circle id="circle" cx="150" cy="150" r="150"/>
  <use href="#circle" x="10"  fill="red" transform="translate(350 50)"/>
  <use href="#circle" x="10"  fill="yellow" transform="translate(700 50)"/>
</svg>

и если вы хотите стилизовать <use>

/* #circle:hover {
  fill: blue;
} */

.new:hover {
  fill: green;
}

.new2:hover {
  fill: pink;
}
<svg viewBox="0 0 1000 1000" id="tr">
  <circle id="circle" cx="150" cy="150" r="150"/>
  <use href="#circle" x="10"  class="new"fill="red" transform="translate(350 50)"/>
  <use href="#circle" x="10"  class="new2" fill="yellow" transform="translate(700 50)"/>
</svg>
...