Ответ 1
Вы не можете обратиться к элементу, на который ссылается с помощью использования. Здесь - подробный ответ на ваш вопрос.
Также см. этот ответ, в котором говорится о возможном обходном пути.
Могу ли я исправить проблемы с кросс-браузерными CSS с помощью спрайта SVG <use xlink>, не прибегая к полному встроенному коду?
РЕЗЮМЕ: Некоторые эффекты CSS-таргетинга CSS не работают в Chrome и IE (Firefox в порядке) в sprite <use xlink> SVG, но тот же CSS работает абсолютно нормально, когда тот же SVG-код действительно встроен.
JSFIDDLE: http://jsfiddle.net/x8vg8k4p/5/
В настоящее время я использую блоки <svg><use xlink:href="#symbol-id" /></svg> для вызова SVG-кода из спрайта SVG (как внешнего файла), импортированного через PHP динамически.
Некоторые эффекты CSS применяются к SVG, как в стандартном, так и при наведении. Все эти эффекты отлично работают на Firefox, но в IE и Chrome они не работают:
- Атрибут
fillвcircleне вступает в силу - Настройки
opacityна двух внутренних частях SVG (крест по умолчанию и большой палец на зависании) не вступают в силу.
Я считаю, что нет ничего плохого в CSS, поскольку один и тот же код работает абсолютно нормально, если SVG-код inline и не импортируется с помощью спрайта id справки, который скрипт демонстрирует очень четко.
Я боролся много часов, двигая фрагменты кода, добавляя и удаляя дополнительные атрибуты, и не смог решить это.
Ниже приведены соответствующие отрывки полного кода, которые можно увидеть на ссылке JSfiddle. Похоже, что для удобства чтения здесь содержится весь код, но я с удовольствием отредактировал вопрос, если кто-то мне это скажет это плохая форма.
не работает:
<a><svg><use xlink:href="#thumbs-up" /></svg></a>
рабочий:
<a><svg><!-- truly inline SVG code here --></svg></a>
эти части CSS являются битами, которые терпят неудачу в Chrome и IE:
a svg circle {fill: #4291c2;}
a svg path#cross {opacity: 0;}
a:hover svg circle {fill: #91c142;}
a:hover svg path#cross {opacity: 1;}
a:hover svg g#hand {opacity: 0;}
, наконец, сам код SVG:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<symbol id="thumbs-up" viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50"/>
<g id="hand">
<polygon fill="#FFFFFF" points="64.287,37.926 64.287,71.491 80.925,71.491 73.044,37.926 "/>
<path fill="#FFFFFF" d="M54.425,41.857c0-2.634-2.811-4.295-5.025-5.155c-2.728-1.059-4.069-4.203-1.565-8.379
c2.146-3.58-2.084-8.795-6.628-6.058c-5.205,3.134-4.073,11.161-2.468,15.889c0.61,1.798-0.435,1.743-1.756,1.743
c-1.081,0-5.646,0-5.646,0h-8.469c-0.998,0-3.288,6.399-2.289,6.399h10.729c-0.188,0.5-0.406,1.391-0.619,2.544H19.768
c-1.152,0-1.919,7.2-0.714,7.2h10.859c-0.035,0.842-0.049,1.695-0.038,2.544H19.372c-1.195,0-0.277,6.256,0.803,6.256h10.413
c0.245,0.95,0.561,1.813,0.962,2.544H21.331c-1.294,0,1.405,5.811,3.027,5.811h6.978c4.925,0,13.934,0,17.805,0
c3.872,0,5.378-5.477,11.86-5.477V43.891C61.001,43.891,54.425,44.12,54.425,41.857z"/>
</g>
<path id="cross" fill="#FFFFFF" d="M50.042,54.392L39.967,66.389c-0.659,0.854-1.478,1.281-2.454,1.281
c-0.879,0-1.612-0.306-2.198-0.915c-0.586-0.61-0.879-1.355-0.879-2.234c0-0.781,0.195-1.404,0.586-1.867l11.065-13.199
L35.864,37.311c-0.464-0.536-0.696-1.147-0.696-1.831c0-0.806,0.286-1.531,0.859-2.179c0.572-0.646,1.31-0.971,2.211-0.971
c1.023,0,1.852,0.382,2.485,1.145l9.285,11.188l9.547-11.273c0.586-0.706,1.318-1.06,2.198-1.06c0.781,0,1.49,0.275,2.125,0.824
c0.635,0.55,0.953,1.251,0.953,2.105c0,0.83-0.135,1.404-0.403,1.722L54.021,49.495l10.921,13.158
c0.415,0.463,0.623,1.041,0.623,1.729c0,0.937-0.312,1.718-0.935,2.345c-0.622,0.629-1.337,0.942-2.142,0.942
c-0.952,0-1.782-0.427-2.49-1.282L50.042,54.392z"/>
</symbol>
</svg>