Блог

Главная - Вопросы по программированию - SVG RadialGradient SpreadMethod не отображается должным образом

SVG RadialGradient SpreadMethod не отображается должным образом

#html #svg

#HTML #svg

Вопрос:

Я только изучаю формат SVG и пытаюсь создать радиальный градиент с reflect помощью SpreadMethod, но все мои браузеры (Chrome, Firefox, IE), похоже, отображают его неправильно. Как вы можете видеть на скриншоте ниже со страницы руководства по MDN gradients, похоже, работает только значение по умолчанию, Pad , . Левый, озаглавленный «Скриншот», — это то, как они заявляют, что он должен выглядеть, а правый, озаглавленный «Живой образец», — это то, как мой браузер на самом деле отображает его. repeat и reflect имеют жесткие, не градиентные края.

Ожидаемый градиент против фактического

Он также ведет себя таким образом в моих собственных попытках. Вот код из «Живого примера»:

 <svg width="220" height="220" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <radialGradient id="GradientPad" cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" spreadMethod="pad">
            <stop offset="0%" stop-color="red"></stop>
            <stop offset="100%" stop-color="blue"></stop>
        </radialGradient>
        <radialGradient id="GradientRepeat" cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" spreadMethod="repeat">
            <stop offset="0%" stop-color="red"></stop>
            <stop offset="100%" stop-color="blue"></stop>
        </radialGradient>
        <radialGradient id="GradientReflect" cx="0.5" cy="0.5" r="0.4" fx="0.75" fy="0.75" spreadMethod="reflect">
            <stop offset="0%" stop-color="red"></stop>
            <stop offset="100%" stop-color="blue"></stop>
        </radialGradient>
    </defs>

    <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#GradientPad)"></rect>
    <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientRepeat)"></rect>
    <rect x="120" y="120" rx="15" ry="15" width="100" height="100" fill="url(#GradientReflect)"></rect>

    <text x="15" y="30" fill="white" font-family="sans-serif" font-size="12pt">Pad</text>
    <text x="15" y="140" fill="white" font-family="sans-serif" font-size="12pt">Repeat</text>
    <text x="125" y="140" fill="white" font-family="sans-serif" font-size="12pt">Reflect</text>

</svg>

Что может вызвать это?

Комментарии:

1. Возможно, ваш графический драйвер неисправен. Мой Firefox (49) на моем Mac во всех случаях отображается довольно близко к отображению скриншотов.

2. Работает для меня и в FF. Но сломан в Chrome 53. Похоже, это известная проблема

3. Это известная ошибка Chrome / Windows, которую по какой-то причине не удается воспроизвести назначенному инженеру Chrome.