Удовлетворяет Chrome как устаревший # в URL, но нарушает маску SVG - PullRequest
0 голосов
/ 31 мая 2018

svg {
  width: 500px;
  height: 500px;
}
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1"
     viewBox="0 0 100 100"
>
  <!-- MASK DEFINITION -->
  
  <defs>
    <mask id="mask" x="0" y="0" width="100" height="100">
      <rect x="0" y="0" width="100" height="100" fill="#fff"/>

      <rect class="rect"
            x="10"
            y="10"
            width="20"
            height="20"
      >
      </rect>
    </mask>
  </defs>
  <!-- MASK DEF -->

  <rect x="0" y="0" width="100" height="100" mask="url(%23mask)"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1"
     viewBox="0 0 100 100"
>
  <!-- MASK DEFINITION -->
  
  <defs>
    <mask id="mask" x="0" y="0" width="100" height="100">
      <rect x="0" y="0" width="100" height="100" fill="#fff"/>

      <rect class="rect"
            x="10"
            y="10"
            width="20"
            height="20"
      >
      </rect>
    </mask>
  </defs>
  <!-- MASK DEF -->

  <rect x="0" y="0" width="100" height="100" mask="url(#mask)"/>
</svg>

У меня есть SVG с маской.Другой элемент использует маску как таковую:

mask="url(#mask)"

Пытаясь удовлетворить это: Рассматривать '#' как конечное содержимое тела URI данных Я изменил маску svg на "url (% 23mask)) ", но это полностью ломает маску.

Кто-нибудь знает решение этой проблемы?Есть ли способ удовлетворить и хром, и маску?

Фрагмент кода ниже содержит два идентичных svg;единственное отличие состоит в том, что один использует #, а другой использует% 23 при определении своих URL.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...