Можно ли использовать селекторы CSS в SVG, отображаемом через URI данных CSS?

У меня есть встроенный SVG с именами классов для стилизации с помощью селекторов CSS. Я хотел бы добавить SVG в мой CSS в качестве URI данных фонового изображения, но означает ли это, что я больше не могу использовать селекторы CSS?

Я прочитал существующие ответы StackOverflow, и вывод, похоже, таков: «Вы не можете применить CSS, потому что это изображение или ресурс с потенциально другого сайта».

Как изменить цвет изображения SVG в свойстве содержимого CSS?

Изменить цвет заливки SVG при использовании в качестве фонового изображения

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

Наконец, были некоторые решения, в которых вы могли использовать маскирование SVG и применять одиночный цвет к частям вашего SVG, устанавливая цвет фона элемента. Этого недостаточно для моего случая, так как я хотел бы использовать от 2 до 4 цветов.

Вот версии SVG и Data URI моего изображения:

.primary {
	fill: rgb(87, 143, 213);
	stroke: rgb(87, 143, 213);
}
.secondary {
	fill: rgb(176, 202, 234);
}
.secondaryShadeTint {
	fill: purple;
}
.youHaveMail {
	fill: red;
}

svg, div#dataURI {
  width: 100px;
  height: 100px;
}
div#dataURI {
  background-size: 100px, 100px;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 500 500' width='500' height='500' xmlns='http%3A//www.w3.org/2000/svg' xmlns:link='http%3A//www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cmask id='_mail_envelope_mask' x='0' y='0' width='500' height='500' maskUnits='userSpaceOnUse'%3E%3Crect x='0' y='0' width='500' height='500' fill='white'%3E%3C/rect%3E%3Cpolygon points='80%2C170 250%2C330 420%2C170' fill='black'%3E%3C/polygon%3E%3C/mask%3E%3C/defs%3E%3Cpolygon class='primary' points='80%2C140 250%2C300 420%2C140'%3E%3C/polygon%3E%3Cpolygon class='secondary' points='80%2C420 250%2C230 420%2C420' mask='url%28%23_mail_envelope_mask%29'%3E%3C/polygon%3E%3Cpolygon class='secondary' points='70%2C160 70%2C400 185%2C270'%3E%3C/polygon%3E%3Cpolygon class='secondary' points='430%2C160 430%2C400 315%2C270'%3E%3C/polygon%3E%3Ccircle class='youHaveMail' cx='375' cy='160' r='100'%3E%3C/circle%3E%3C/svg%3E")
}
<h1>SVG</h1>
<svg viewBox="0 0 500 500" width="500" height="500">
  <defs>
    <mask id="_mail_envelope_mask" x="0" y="0" width="500" height="500" maskUnits="userSpaceOnUse">
      <rect x="0" y="0" width="500" height="500" fill="white"></rect>
      <polygon points="80,170 250,330 420,170" fill="black"></polygon>
    </mask>
  </defs>
  <polygon class="primary" points="80,140 250,300 420,140"></polygon>
  <polygon class="secondary" points="80,420 250,230 420,420" mask="url(#_mail_envelope_mask)"></polygon>
  <polygon class="secondary" points="70,160 70,400 185,270"></polygon>
  <polygon class="secondary" points="430,160 430,400 315,270"></polygon>
  <circle class="youHaveMail" cx="375" cy="160" r="100"></circle>
</svg>
<h1>Data URI</h1>
<div id="dataURI"></div>


svg css css-selectors data-uri
person Nate    schedule 13.01.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Селекторы в основном документе не могут запрашивать документ SVG, встроенный как внешний ресурс, в отличие от встроенных в разметку основного документа.

person BoltClock    schedule 13.01.2017
comment
Я могу понять последствия для безопасности, если CSS не будет применяться к фреймам или встроенным элементам. Но поскольку Javascript позволяет объявлять определенные исключения для контента из одного и того же домена, и учитывая, что SVG через Data URI явно не является междоменным, есть ли способ обойти это ограничение? Рассматривал ли какой-либо браузер или комитет по стандартам исключение для этого обстоятельства? - person Nate; 13.01.2017