Styling SVG path с CSS работает только в Firefox

Я пытаюсь создать определенные пути SVG, он работает нормально в firefox, но в других браузерах это не так.Styling SVG path с CSS работает только в Firefox

SVG SPRITE

<symbol id="interface-feedback" viewBox="0 0 1219 1024"> 
     <title>feedback</title> 
     <path class="path1 fill-color2" d="M117.023 1024.072c-8.244 0-15.448-2.258-21.29-6.595-7.885-5.878-12.401-15.197-12.401-25.34 0-30.537 12.688-69.641 26.129-111.11 14.91-45.913 37.383-115.375 20.752-131.396-85.16-82.293-130.142-181.359-130.213-286.591 0-255.373 273.365-463.112 609.382-463.112 335.945 0 609.239 207.739 609.239 463.076 0 255.409-273.294 463.183-609.239 463.183-33.261 0-180.714-2.796-221.825-9.104-0.072 0-0.143 0-0.215 0-31.72 0-102.4 35.089-154.012 60.608-61.54 30.501-94.622 46.379-116.307 46.379z"></path> 
     <path class="path2 fill-color1" d="M117.023 1024.072c-8.244 0-15.448-2.258-21.29-6.595-7.885-5.878-12.401-15.197-12.401-25.34 0-30.537 12.688-69.641 26.129-111.11 14.91-45.913 37.383-115.375 20.752-131.396-85.16-82.293-130.142-181.359-130.213-286.591 0-255.373 273.365-463.112 609.382-463.112 335.945 0 609.239 207.739 609.239 463.076 0 255.409-273.294 463.183-609.239 463.183-33.261 0-180.714-2.796-221.825-9.104-0.072 0-0.143 0-0.215 0-31.72 0-102.4 35.089-154.012 60.608-61.54 30.501-94.622 46.379-116.307 46.379zM609.382 51.791c-307.415 0-557.483 184.478-557.483 411.213 0.072 90.859 39.605 177.023 114.335 249.351 39.964 38.422 15.878 112.758-7.419 184.657-7.67 23.656-15.519 47.885-19.928 67.956 20.071-8.315 48.53-22.401 71.397-33.727 71.504-35.412 145.948-71.54 185.087-65.447 35.985 5.52 174.657 8.53 214.047 8.53 307.308 0 557.34-184.514 557.34-411.32-0.036-226.735-250.068-411.213-557.376-411.213z"></path> 
     <path class="path3 fill-color1" d="M437.485 459.599c0 28.663-23.493 51.899-52.472 51.899s-52.472-23.236-52.472-51.899c0-28.663 23.493-51.899 52.472-51.899s52.472 23.236 52.472 51.899z"></path> 
     <path class="path4 fill-color1" d="M661.675 459.599c0 28.663-23.477 51.899-52.437 51.899s-52.437-23.236-52.437-51.899c0-28.663 23.477-51.899 52.437-51.899s52.437 23.236 52.437 51.899z"></path> 
     <path class="path5 fill-color1" d="M886.081 459.599c0 28.663-23.493 51.899-52.472 51.899s-52.472-23.236-52.472-51.899c0-28.663 23.493-51.899 52.472-51.899s52.472 23.236 52.472 51.899z"></path> 
    </symbol>

SVG

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

CSS

.interface-feedback .path2,.interface-feedback .path3, .interface-feedback .path4, .interface-feedback .path5{ 
     fill:#ccc; 
} 

.interface-feedback .path1{ 
     fill:#fff; 
}

источник

2015-08-03 user1937021

Я верю FF является единственным браузером, который поддерживает моделирование суб-элементов в 'use' элемента до сих пор. Я думаю, что это экспериментальный вариант. –

нормально, но нет ли сценария, который может это сделать? – user1937021

По существу см. Этот вопрос - http://stackoverflow.com/questions/13673441/svg-use-element-and-hover-style –

Вы можете стиль SY mbol, но не конкретный экземпляр, созданный <use>. Это правило SVG. Как сказал Роберт, поведение FF является ошибкой.

Если вы можете жить с одним цветом, который меняется, то вы можете использовать технику currentColor.

Установка пути использования currentColor для его заполнения указывает, что он использует любое значение атрибута CSS color, которое действовало на момент его создания.

Значит, вы можете изменить цвет при наведении, и этот символ также получит. Как показано в демонстрации ниже.

/* style the symbol definition */ 
 
.path1 { 
 
    fill:#fff; 
 
} 
 

 
.path2, .path3, .path4, .path5 { 
 
    /* tell theese paths to use the current value of "color" as their fill */ 
 
    fill: currentColor; 
 
} 
 

 

 
/* define the color that will be "inherited" by the symbol instance */ 
 
.interface-feedback { 
 
    color: #ccc; 
 
} 
 

 
.interface-feedback:hover { 
 
    color: blue; 
 
} 
 

 

 
/* another color to prove they are independent */ 
 
.interface-feedback2 { 
 
    color: lime; 
 
}

<svg width="0" height="0"> 
 
<symbol id="interface-feedback" viewBox="0 0 1219 1024"> 
 
     <title>feedback</title> 
 
     <path class="path1 fill-color2" d="M117.023 1024.072c-8.244 0-15.448-2.258-21.29-6.595-7.885-5.878-12.401-15.197-12.401-25.34 0-30.537 12.688-69.641 26.129-111.11 14.91-45.913 37.383-115.375 20.752-131.396-85.16-82.293-130.142-181.359-130.213-286.591 0-255.373 273.365-463.112 609.382-463.112 335.945 0 609.239 207.739 609.239 463.076 0 255.409-273.294 463.183-609.239 463.183-33.261 0-180.714-2.796-221.825-9.104-0.072 0-0.143 0-0.215 0-31.72 0-102.4 35.089-154.012 60.608-61.54 30.501-94.622 46.379-116.307 46.379z"></path> 
 
     <path class="path2 fill-color1" d="M117.023 1024.072c-8.244 0-15.448-2.258-21.29-6.595-7.885-5.878-12.401-15.197-12.401-25.34 0-30.537 12.688-69.641 26.129-111.11 14.91-45.913 37.383-115.375 20.752-131.396-85.16-82.293-130.142-181.359-130.213-286.591 0-255.373 273.365-463.112 609.382-463.112 335.945 0 609.239 207.739 609.239 463.076 0 255.409-273.294 463.183-609.239 463.183-33.261 0-180.714-2.796-221.825-9.104-0.072 0-0.143 0-0.215 0-31.72 0-102.4 35.089-154.012 60.608-61.54 30.501-94.622 46.379-116.307 46.379zM609.382 51.791c-307.415 0-557.483 184.478-557.483 411.213 0.072 90.859 39.605 177.023 114.335 249.351 39.964 38.422 15.878 112.758-7.419 184.657-7.67 23.656-15.519 47.885-19.928 67.956 20.071-8.315 48.53-22.401 71.397-33.727 71.504-35.412 145.948-71.54 185.087-65.447 35.985 5.52 174.657 8.53 214.047 8.53 307.308 0 557.34-184.514 557.34-411.32-0.036-226.735-250.068-411.213-557.376-411.213z"></path> 
 
     <path class="path3 fill-color1" d="M437.485 459.599c0 28.663-23.493 51.899-52.472 51.899s-52.472-23.236-52.472-51.899c0-28.663 23.493-51.899 52.472-51.899s52.472 23.236 52.472 51.899z"></path> 
 
     <path class="path4 fill-color1" d="M661.675 459.599c0 28.663-23.477 51.899-52.437 51.899s-52.437-23.236-52.437-51.899c0-28.663 23.477-51.899 52.437-51.899s52.437 23.236 52.437 51.899z"></path> 
 
     <path class="path5 fill-color1" d="M886.081 459.599c0 28.663-23.493 51.899-52.472 51.899s-52.472-23.236-52.472-51.899c0-28.663 23.493-51.899 52.472-51.899s52.472 23.236 52.472 51.899z"></path> 
 
    </symbol> 
 
</svg> 
 

 

 
<svg class="icon interface-feedback"><use xlink:href="#interface-feedback"></use></svg> 
 
<svg class="icon interface-feedback2"><use xlink:href="#interface-feedback"></use></svg>

источник

2015-08-03 14:51:50

Styling SVG path с CSS работает только в Firefox

ответ

Смежные вопросы