Путь SVG: заполнение шаблона не работает в Firefox и Safari - PullRequest
Новая
       33

Путь SVG: заполнение шаблона не работает в Firefox и Safari

0 голосов
/ 12 мая 2018

SVG-элемент пути не работает в Firefox и Safari, но работает в Chrome . Почему путь не заполнен с помощью шаблона в Firefox и Safari? 

<svg id="" xmlns="http://www.w3.org/2000/svg" height="500" width="600" style="position: absolute;">
	<defs>
		<pattern id="imgpattern" x="0" y="0" width="1" height="1" patternUnits="userSpaceOnUse">
			<image width="600" xlink:href="https://i.pinimg.com/564x/e1/a5/b7/e1a5b7edacee456a4f3bc3e00c3c01d9.jpg"></image>
		</pattern>
	</defs>
	<path d="M50,100 C50,100 100,100 100,50 L100,50 500,50 C500,50 500,100 550,100 L550,100 550,400 C550,400 500,400 500,450 L500,450 100,450 C100,450 100,400 50,400 L50,400 50,100 L50,100 0,100 0,0 0,425 L0,425 50,425 C50,425 75,425 75,450 L50,450 50,425 0,425 0,500 525,500 525,450 C525,450 525,425 550,425 L550,425 550,450 525,450 525,500 600,500 600,75 550,75 C550,75 525,75 525,50 L525,50 550,50 550,75 600,75 600,0 75,0 75,50 C75,50 75,75 50,75 L50,50 75,50 75,0  0,0  0,100" fill="#ff0000;" stroke="#F000" stroke-width="1px" style="fill:url(#imgpattern)"></path>
</svg>

1 Ответ

0 голосов
/ 12 мая 2018

Нет атрибута высоты на изображении.SVG 2 допускает пропуск ширины / высоты, но пока только Blink реализовал эту часть SVG 2.

У вас также есть избыточная заливка в прямоугольнике (так как вы применяете заливку шаблона как стиль)

<svg id="" xmlns="http://www.w3.org/2000/svg" height="500" width="600" style="position: absolute;">
      <defs>
        <pattern id="imgpattern" x="0" y="0" width="1" height="1" patternUnits="userspaceOnUse">
    	   <image width="600" height="600" xlink:href="https://i.pinimg.com/564x/e1/a5/b7/e1a5b7edacee456a4f3bc3e00c3c01d9.jpg"></image>
    	</pattern>
      </defs>
    	
  	  <path d="M50,100 C50,100 100,100 100,50 L100,50 500,50 C500,50 500,100 550,100 L550,100 550,400 C550,400 500,400 500,450 L500,450 100,450 C100,450 100,400 50,400 L50,400 50,100 L50,100 0,100 0,0 0,425 L0,425 50,425 C50,425 75,425 75,450 L50,450 50,425 0,425 0,500 525,500 525,450 C525,450 525,425 550,425 L550,425 550,450 525,450 525,500 600,500 600,75 550,75 C550,75 525,75 525,50 L525,50 550,50 550,75 600,75 600,0 75,0 75,50 C75,50 75,75 50,75 L50,50 75,50 75,0  0,0  0,100" stroke="#F000" stroke-width="1px" style="fill:url(#imgpattern)"></path>
		
	</svg>
...