Невозможно настроить таргетинг на xlink: href с помощью селекторов атрибутов

Я пытаюсь избежать <use class="myicon" xlink:href="myicon" />, просто настроив значение атрибута xlink:href при стилизации моих SVG. Ни один из следующих селекторов не похоже на работу:Невозможно настроить таргетинг на xlink: href с помощью селекторов атрибутов

[xlink|href*=myicon], // I also set the namespace at the top of the file 
[xlink:href*=myicon], 
[xlink\:href*=myicon] { 
    color: yellow !important; 
}

Несколько других вопросов на сайте, кажется, подразумевают, что стиль, используя атрибут селекторы на пространства имен атрибутов должны быть возможными, даже если обычный HTML не имеет никакой поддержки с пространствами имен атрибутов, поскольку это следует рассматривать только как одно слово. Но я не могу заставить его работать, поэтому я теряю веру в это.

источник

2017-02-15 oligofren

Вы определенно были на правильном пути, с тем, что вы делаете .. на самом деле, у вас есть правильный ответ:

[xlink\:href*=myicon] { 
    color: yellow !important; 
}

Причина это не работает, потому что первые два селекторы вы пытались были недействительно (оба символа | и : должны быть экранированы), и если селектор CSS содержит недопустимые символы, весь селектор группы получает выброшен.

Проверьте этот пример как доказательство ... div (просто используя div для простоты, хотя это не совсем правильно) должен быть установлен как красный, поскольку это правило появляется после синего, но поскольку группа селекторов выбрасывается, это правило не будет применяться. При этом действует другой селектор, который не имеет недопустимых символов!

[xlink\:href*=myicon] { 
 
    color: blue; 
 
} 
 

 
[xlink|href*=myicon], 
 
[xlink:href*=myicon], 
 
[xlink\:href*=myicon] { 
 
    color: red; 
 
}

<div xlink:href="myicon">Lorem Ipsum</div>

источник

2017-02-16 02:10:24

«Причина, по которой не работает, потому что это первые два селектора, которые вы пробовали, были недействительными (оба символа | и: должны быть экранированы) «The | совершенно правдоподобно и не нужно бежать - он использует его точно так, как предполагалось. И пока [xlink \: href * = myicon] * работает *, пурист SVG сказал бы вам, что это не * правильный ответ (и причина дается в моем предыдущем предложении). – BoltClock

Хорошая уловка по моей ошибке; Мои знания отсутствовали в использовании '@ namespace' ... хотя стоит отметить, что использование' '' в селекторе все равно приведет к недействительности всей группы селекторов, если правильное пространство имен не включено! –

Как говорит Блейк Манн, если вы перечисляя все селекторы вместе, как это, он не будет работать, потому что [xlink:href*=myicon] недействителен, который вызывает ваш весь набор правил будет отброшен. Если вы пытаетесь использовать разные селекторы, вам нужно попробовать их по одному.

[xlink|href*=myicon] работает нормально, но убедитесь, что вы указали пространство имен XLink и не SVG имен:

@namespace xlink 'http://www.w3.org/1999/xlink'; 
 

 
html { 
 
    background-color: black; 
 
} 
 

 
[xlink|href*=myicon] { 
 
    fill: yellow; 
 
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <defs> 
 
    <text id="myicon" y="16">Icon</text> 
 
    </defs> 
 
    <use xlink:href="#myicon" /> 
 
</svg>

источник

2017-02-17 03:29:34 BoltClock

Невозможно настроить таргетинг на xlink: href с помощью селекторов атрибутов

ответ

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