Фильтр SVG Bevel не работает в Firefox

Для игры, которую я пытаюсь запрограммировать, используя (ванильный) javascript, css и svg, у меня есть следующий SVG для отображения двери:

<svg width="125" height="100" viewBox="0 0 125 100" xmlns="http://www.w3.org/2000/svg">
<defs>
    <filter id="floorblur" filterUnits="objectBoundingBox" x="0" y="0" width="4" height="4">
        <feGaussianBlur in="SourceAlpha" stdDeviation="4.1" result="blur"/>
    </filter>
    <filter id="doorblur" filterUnits="objectBoundingBox" x="0" y="0" width="19" height="33">
        <feGaussianBlur in="SourceAlpha" stdDeviation="6.27" result="blur"/>
    </filter>
    <filter id="kozijnblur" filterUnits="objectBoundingBox" x="0" y="0" width="12" height="7">
        <feGaussianBlur in="SourceAlpha" stdDeviation="1.1" result="blur"/>
    </filter>
    <filter id="doorbevel" filterUnits="objectBoundingBox" x="0" y="0" width="37" height="79">
        <feGaussianBlur in="SourceAlpha" stdDeviation="0.812" result="blur"/>

        <feSpecularLighting in="blur" surfaceScale="2" specularConstant="0.8" specularExponent="4" result="specOut" lighting-color="rgb(235, 235, 187)">
            <fePointLight x="-1000" y="-2000" z="90"/>
        </feSpecularLighting>
        <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut2"/>
        <feComposite in="SourceGraphic" in2="specOut2" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint" />
    </filter>
    <filter id="kozijnbevel" filterUnits="objectBoundingBox" x="0" y="0" width="125" height="100">
        <feGaussianBlur in="SourceAlpha" stdDeviation="3.335" result="blur"/>

        <feSpecularLighting in="blur" surfaceScale="2" specularConstant="0.8" specularExponent="4" result="specOut" lighting-color="rgb(202,205,130)">
            <fePointLight x="-90" y="-70" z="53"/>
        </feSpecularLighting>
        <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut2"/>
        <feComposite in="SourceGraphic" in2="specOut2" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint" />
    </filter>
    <pattern id="backgroundwallpattern" x="0" y="0" width="30" height="10" patternUnits="userSpaceOnUse">
        <rect x="0" y="0" width="30" height="10" fill="#9B9D59" fill-opacity="1.0" />
        <rect x="0" y="0" width="29" height="4" fill="rgb(202,205,130)" fill-opacity="1.0" />
        <rect x="0" y="5" width="14" height="4" fill="rgb(202,205,130)" fill-opacity="1.0" />
        <rect x="15" y="5" width="15" height="4" fill="rgb(202,205,130)" fill-opacity="1.0" />
        <rect x="15" y="5" width="15" height="4" fill="rgb(202,205,130)" fill-opacity="1.0" />
    </pattern>
    <pattern id="backgroundfloor" x="0" y="0" width="7" height="7" patternUnits="userSpaceOnUse">
        <rect x="0" y="0" width="7" height="7" fill="rgb(236, 238, 168)" />
        <circle cx="1" cy="1" r="1" fill="rgb(202,205,130)" fill-opacity="1.0" filter="url(#floorblur)" />
        <circle cx="3" cy="2" r="1" fill="rgb(202,205,130)" fill-opacity="1.0" filter="url(#floorblur)" />
        <circle cx="2" cy="5" r="2" fill="rgb(202,205,130)" fill-opacity="1.0" filter="url(#floorblur)" />
        <circle cx="6" cy="6" r="1" fill="rgb(202,205,130)" fill-opacity="1.0" filter="url(#floorblur)" />
        <circle cx="4" cy="0" r="2" fill="rgb(202,205,130)" fill-opacity="1.0" filter="url(#floorblur)" />
    </pattern>
    <pattern id="doorpanels" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
        <rect x="0" y="0" width="20" height="20" fill="rgb(179, 181, 140)" fill-opacity="1.0" />
        <path d="M 5 10 L 8 13 L 12 13 L 15 10 L 12 7 L 8 7 L 5 10" fill="rgb(202, 205, 130)" fill-opacity="1.0" filter="url(#doorblur)" />
        <path d="M 0 5 L 0 13 L 3 13 L 8 7 L 0 5" fill="rgb(202, 205, 130)" fill-opacity="1.0" filter="url(#doorblur)" />
        <path d="M 20 0 L 20 8 L 17 8 L 12 0 L 20 0" fill="rgb(202, 205, 130)" fill-opacity="1.0" filter="url(#doorblur)" />
        <path d="M 2 20 L 2 12 L 7 12 L 15 20 L 2 20" fill="rgb(202, 205, 130)" fill-opacity="1.0" filter="url(#doorblur)" />
        <path d="M 20 18 L 18 12 L 15 12 L 12 18 L 20 18" fill="rgb(202, 205, 130)" fill-opacity="1.0" filter="url(#doorblur)" />
    </pattern>
    <pattern id="kozijn" x="0" y="0" width="12" height="7" patternUnits="userSpaceOnUse">
        <rect x="0" y="0" width="12" height="7" fill="rgb(149, 151, 110)" fill-opacity="1.0" />
        <rect x="0" y="1" width="12" height="3" fill="rgb(109, 111, 80)" fill-opacity="1.0" filter="url(#kozijnblur)" />
        <rect x="0" y="4" width="12" height="1" fill="rgb(189, 191, 150)" fill-opacity="1.0" filter="url(#kozijnblur)" />
    </pattern>
</defs>
<g class="svg-earth-door" fill="none" fill-rule="evenodd">
    <rect x="25" y="20" width="75" height="58" style="stroke: none; fill: url(#backgroundwallpattern)" />
    <rect x="25" y="78" width="75" height="21" style="stroke: none; fill: rgb(127, 131, 70)" />
    <path d="M 40 99 L 85 99 L 82 88 L 43 88 L 40 99" style="fill: url(#backgroundfloor)" /> 
    <path d="M 43 87 L 82 87 L 80 79 L 45 79 L 43 87" style="fill: url(#backgroundfloor)" /> 
    <path d="M 39 99 L 25 99 L 25 88 L 42 88 L 39 99" style="fill: url(#backgroundfloor)" /> 
    <path d="M 42 87 L 25 87 L 25 79 L 44 79 L 42 87" style="fill: url(#backgroundfloor)" /> 
    <path d="M 86 99 L 100 99 L 100 88 L 83 88 L 86 99" style="fill: url(#backgroundfloor)" /> 
    <path d="M 83 87 L 100 87 L 100 79 L 81 79 L 83 87" style="fill: url(#backgroundfloor)" /> 
    <rect x="25" y="20" width="37" height="79" style="stroke: rgb(127, 131, 70); stroke-width: 1; fill: url(#doorpanels)" filter="url(#doorbevel)" />
    <rect x="63" y="20" width="37" height="79" style="stroke: rgb(127, 131, 70); stroke-width: 1; fill: url(#doorpanels)" filter="url(#doorbevel)" />
    <path d="M 0 100 L 15 0 L 110 0 L 125 100 L 100 100 L 100 20 L 25 20 L 25 100 L 0 100" style="fill: url(#kozijn)" filter="url(#kozijnbevel)" />
</g>

There are panels that are not visible but that is done on purpose, as I will animate through CSS the door panels being opened so that the other background elements in the SVG become visible. But that is not the point of the question here.

Когда я смотрю на это в Chrome, оно выглядит так, как я хочу. Однако в Firefox (а также в IE) все выглядит намного темнее, и я не вижу примененного к нему эффекта скоса. Я пробовал несколько вещей, которые можно увидеть в других вопросах stackoverflow, связанных с этой темой, например, поместить фильтр в атрибут стиля или добавить имя файла к URL-адресу в атрибуте фильтра, но ни одно из этих решений не работает. У кого-нибудь есть идеи, как заставить этот SVG выглядеть одинаково во всех трех браузерах? (желательно, чтобы они выглядели так, как в Chrome)


svg firefox svg-filters
person Daniel van Dommele    schedule 05.03.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я думаю, проблема в том, что filterUnits="objectBoundingBox" сопровождаются размерами, которые вы должны использовать в качестве единиц измерения userSpace (37 и т. д.). Chrome понял, что вы должны иметь в виду единицы, но Firefox полагает, что вы знаете, что делаете, и вы действительно хотели сделать ширину фильтра равной 3700% ограничивающей рамки.

Просто удалите это объявление, и Firefox и Chrome станут больше похожи друг на друга. (Подсветка также может быть проблематичной в разных браузерах, но я не думаю, что проблема здесь.)

person Michael Mullany    schedule 05.03.2016
comment
Спасибо за ваш ответ! Я попробовал то, что вы предложили, и удалил атрибут filterUnits, но это не изменило его для меня. Я также попытался изменить значение objectBoundingBox на userSpaceOnUse или установить ширину и высоту на 1, но даже это не помогло. Можно ли иначе опубликовать изменения в ответе? Может быть, я пытался исправить это не так... - person Daniel van Dommele; 06.03.2016
comment
Неважно! Оказалось, что ваше предложение сработало, но из-за выбранных мной значений точечного освещения освещение было неправильным для Firefox. Изменение тех с изменением filterUnits заставило скос и лучшее освещение появиться в firefox. Сейчас разница между хромом и файрфоксом все еще есть, но сейчас она намного лучше, чем была. Спасибо! - person Daniel van Dommele; 06.03.2016