SVG渐变(4)

SVG渐变(4)

径向渐变

#svg{
    width: 500px;
    height: 500px;
    border: 1px solid #ccc;
}

<svg id="svg">
    <defs>
        <radialGradient id="gradient" cx="50%" cy="50%" r="25%" fx="50%" fy="50%">
            <stop offset="0%" style="stop-color:green;"></stop>
            <stop offset="100%" style="stop-color:red;"></stop>
        </radialGradient>
    </defs>
    <rect x="0" y="0" width="500" height="500" style="fill:url(#gradient)"></rect>
</svg>

通过上述例子来解读相关属性:

radialGradient中的属性:

cx,cy确定圆心坐标——百分数相对于svg元素大小

r确定半径

fx,fy确定渐变焦点坐标——即渐变开始的那个点的坐标(百分数相对于svg元素大小)

通过上述我们也可以看出渐变的使用方法

通过

<defs>
    <radialGradient id="gradient" cx="50%" cy="50%" r="25%" fx="50%" fy="50%">
        <stop offset="0%" style="stop-color:green;"></stop>
        <stop offset="100%" style="stop-color:red;"></stop>
    </radialGradient>
</defs>

定义一个渐变

像这样使用

style="fill:url(#gradient)"

线性渐变

<svg id="svg">
    <defs>
        <linearGradient id="bg1" x1="0" y1="0" x2="0" y2="50%">
            <stop offset="0%" style="stop-color:rgb(255,255,0);"/>
            <stop offset="100%" style="stop-color:rgb(255,0,0);"/>
        </linearGradient>
    </defs>
    <rect x="0" y="0" width="500" height="500" style="fill:url(#bg1)"></rect>
</svg>

通过上述例子来解读相关属性:

linearGradient中的属性:

x1,y1起始点坐标,百分数相对于svg元素大小

x2,y2确定终止点坐标,百分数相对于svg元素大小

两个点确定了渐变方向、长度

高斯滤镜

#svg{
    width: 500px;
    height: 500px;
    border: 1px solid #ccc;
}

<svg id="svg">
    <defs>
        <filter id="Gaussian_Blur">
            <feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
        </filter>
    </defs>
    <rect x="0" y="0" width="500" height="500" style="filter:url(#Gaussian_Blur)"></rect>
</svg>

其他滤镜请看http://www.w3school.com.cn/svg/svg_filters_intro.asp

### 实现SVG Path的渐变色效果 在SVG中,可以通过定义`<linearGradient>`或`<radialGradient>`来创建渐变色,并将其应用于`<path>`元素的`fill`或`stroke`属性。以下是一个完整的实现方法[^1]。 #### 1. 定义渐变 使用`<defs>`标签定义渐变。例如,线性渐变可以通过`<linearGradient>`标签定义,其中`stop`标签用于指定渐变的颜色和位置。 ```xml <defs> <linearGradient id="gradient" gradientUnits="userSpaceOnUse"> <stop offset="0%" stop-color="#FF0000" /> <stop offset="50%" stop-color="#00FF00" /> <stop offset="100%" stop-color="#0000FF" /> </linearGradient> </defs> ``` 上述代码定义了一个从红色到绿色再到蓝色的线性渐变[^3]。 #### 2. 应用渐变到Path 通过`fill`或`stroke`属性将定义的渐变应用到`<path>`元素中。例如: ```xml <path d="M10 80 Q 50 10, 90 80 T 170 80" stroke="url(#gradient)" stroke-width="10" fill="none" /> ``` 在此示例中,`stroke`属性引用了`#gradient`,从而为路径设置了渐变色的描边[^4]。 #### 3. 示例代码 以下是一个完整的SVG示例,展示如何为`<path>`元素设置渐变色描边: ```xml <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="gradient" gradientUnits="userSpaceOnUse"> <stop offset="0%" stop-color="#FF0000" /> <stop offset="50%" stop-color="#00FF00" /> <stop offset="100%" stop-color="#0000FF" /> </linearGradient> </defs> <path d="M10 80 Q 50 10, 90 80 T 170 80" stroke="url(#gradient)" stroke-width="10" fill="none" /> </svg> ``` #### 4. 注意事项 - 如果需要填充渐变色而不是描边,可以将`fill`属性设置为`url(#gradient)`[^4]。 - 确保`gradientUnits`属性正确设置为`userSpaceOnUse`或`objectBoundingBox`,以避免某些浏览器中路径不显示的问题[^1]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值