代码之家 › 专栏 › 技术社区 › Sujay U N

SVG矩形和路径渐变

effect shape gradient path svg

Sujay U N · 技术社区 · 7 年前

我使用如下径向梯度(radialGradient)来产生管-灯泡辉光效果:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="100%" height="100%"
     viewBox="0 0 100 100">

    <radialGradient id="radial" cx="50" cy="50" r="50"
        gradientUnits="userSpaceOnUse">
        <stop  offset="0.8" style="stop-color:#00FFFF"/>
        <stop  offset="1" style="stop-color:#004444"/>
    </radialGradient>

    <circle cx="50" cy="50" r="50"
            fill="url(#radial)"/>
</svg>

但对于矩形和路径渐变,或者对于不同形状(如矩形或星形)的任何自定义形状渐变,我该如何做呢?
我们在MS PowerPoint中有这个选项,称为矩形渐变和路径渐变。
它应该从中心开始,每个边缘线的第一个停止点为0.8,第二个停止点为1,就像上面的效果一样。

Illustrator中有这些渐变吗?

1 回复 | 直到 7 年前

Paul LeBeau 7 年前

您可以通过将形状拆分为多个子形状来伪造它。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="100%" height="100%"
     viewBox="0 0 100 100">

    <linearGradient id="horiz" x1="0.5" spreadMethod="reflect">
        <stop  offset="0.8" style="stop-color:#00FFFF"/>
        <stop  offset="1" style="stop-color:#004444"/>
    </linearGradient>

    <linearGradient id="vert" y1="0.5" x2="0" y2="1" spreadMethod="reflect">
        <stop  offset="0.8" style="stop-color:#00FFFF"/>
        <stop  offset="1" style="stop-color:#004444"/>
    </linearGradient>

    <polygon points="0,0, 100,100, 100,0, 0,100" fill="url(#horiz)"/>
    <polygon points="0,0, 100,0, 0,100, 100,100" fill="url(#vert)"/>
</svg>

其工作方式是,我们有两个沙漏形状的多边形,并对每个多边形应用线性渐变。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     width="100%" height="100%"
     viewBox="0 0 100 100">

    <polygon points="0,0, 100,100, 100,0, 0,100" fill="gold"/>
    <polygon points="0,0, 100,0, 0,100, 100,100" fill="green"/>
</svg>

推荐文章

noGodHere · Python使用错误的路径写入文件

1 年前

ManOnTheMoon · 使用循环创建的文件夹/子文件夹的文件路径错误

2 年前

Timur Shtatland · 如何在“sed”(例如,no PREFIXPREFIX)中只向路径预加一次前缀(以幂等方式)?

2 年前

Bakare Kazeem · 如何使用node将图像转换为PDF。没有第三方Api的js

2 年前

Giao LÃª · SDL2库的资源路径

2 年前

benroths · PyQt5/Python3参考qss文件

2 年前

killuaZd · JFileChooser在其他actionevent中重用路径

2 年前

Sean McCallum · 如何在批处理脚本子例程中获取Java版本?

6 年前

GrumbleBumpkin · Anaconda3自定义安装位置:“conda”不工作

6 年前

Kenny · 如何使用路径中的变量编写vba

6 年前