Несоответствие паттернов SVG между Chrome и Firefox - PullRequest
Новая
       21

Несоответствие паттернов SVG между Chrome и Firefox

6 голосов
/ 19 января 2012

У меня есть градиент, перекрывающий сплошной цвет (красный), указанный как шаблон: 

<svg width="480" height="480">
    <defs>

        <pattern width="1" height="1" x="0" y="0" id="pattern">
            <rect width="240" height="240" x="0" y="0" fill="rgba(255,0,0,1)"/>
            <rect width="240" height="240" x="0" y="0" fill="url(#gradient)"/>
        </pattern>

        <linearGradient id="gradient" x1="0" y1="1" x2="0" y2="0">
            <stop offset="0%" stop-color="rgb(0,0,0)" stop-opacity="1"/>
            <stop offset="100%" stop-color="rgb(0,0,0)" stop-opacity="0"/>
        </linearGradient>

    </defs>
    <path
      transform="matrix(1,0,0,1,200,200)"
      d="M0 0M 120 0 A 120 120 0 0 0 -120 0 A 120 120 0 0 0 120 0"
      fill="url(#pattern)"
    />
</svg>

Слева: Firefox.Справа: Chrome

enter image description here

Правый (Chrome) правильный.

Кто-нибудь знает, как заставить это работать вFirefox?

Посмотреть вживую: http://jsbin.com/eyenoh/edit#html,live

1 Ответ

3 голосов
/ 19 января 2012

Мне удалось заставить его работать, используя ограничивающую рамку объекта в качестве системы координат для содержимого шаблона. 

<pattern width="1" height="1" x="0" y="0" id="pattern" patternContentUnits="objectBoundingBox">
    <rect width="1" height="1" x="0" y="0" fill="rgba(255,0,0,1)"/>
    <rect width="1" height="1" x="0" y="0" fill="url(#gradient)"/>
</pattern>

Смотрите здесь: http://jsbin.com/efesev/edit#html,live

Я попробуюрасследовать дальше.Выглядит как хороший кандидат на сообщение об ошибке.

...