Как я могу переписать градиент с userSpaceOnUse на objectBoundingBox? - PullRequest
Новая
       37

Как я могу переписать градиент с userSpaceOnUse на objectBoundingBox?

0 голосов
/ 25 мая 2020

У меня есть этот градиент, который использует userSpaceOnUse. 

<svg height="400px" width="800px" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="grad1" x1="0" y1="0" x2="800" y2="400" gradientUnits="userSpaceOnUse">
            <stop offset="0%" style="stop-color:green;stop-opacity:1" />
            <stop offset="50%" style="stop-color:black;stop-opacity:1" />
            <stop offset="100%" style="stop-color:red;stop-opacity:1" />
        </linearGradient>
    </defs>
    <rect x="0" y="0" width="800" height="400" fill="url(#grad1)"/>
</svg>

Я хочу переписать его, чтобы использовать objectBoundingBox, но визуализировать его так же. Как я могу это сделать?

Думаю, переписанный SVG будет примерно так: 

<svg height="400px" width="800px" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="grad1" x1="0" y1="0" x2="1" y2="1" gradientUnits="objectBoundingBox">
            <stop offset="0%" style="stop-color:green;stop-opacity:1" />
            <stop offset="50%" style="stop-color:black;stop-opacity:1" />
            <stop offset="100%" style="stop-color:red;stop-opacity:1" />
        </linearGradient>
    </defs>
    <rect x="0" y="0" width="800" height="400" fill="url(#grad1)"/>
</svg>

Этот ответ ({ ссылка }) указывает на то, что мне нужно использовать преобразование, но мне не удалось найти решение.

1 Ответ

0 голосов
/ 25 мая 2020 

<!-- https://stackoverflow.com/questions/22214999/svg-linear-gradient-independent-of-the-shape-coordinates -->

<svg height="400px" width="800px" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <linearGradient id="grad1" x1="0" y1="0" x2="1" y2="0.5" gradientUnits="objectBoundingBox" gradientTransform="scale(1, 2)">
            <stop offset="0%" style="stop-color:green;stop-opacity:1" />
            <stop offset="50%" style="stop-color:black;stop-opacity:1" />
            <stop offset="100%" style="stop-color:red;stop-opacity:1" />
        </linearGradient>
    </defs>
    <rect x="0" y="0" width="800" height="400" fill="url(#grad1)"/>
</svg>
...