偏移阴影、渐变色、地理定位

最新推荐文章于 2025-05-07 13:31:33 发布

忘川之鱼

最新推荐文章于 2025-05-07 13:31:33 发布

阅读量204

点赞数

文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/m0_68618659/article/details/125853115

版权

本文介绍了SVG滤镜中的偏移阴影实现，包括feOffset、feColorMatrix和feGaussianBlur的使用，并探讨了渐变色的创建，如线性渐变和径向渐变。同时，讲解了如何利用JavaScript获取地理位置信息，以及可能遇到的权限和错误处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、偏移阴影

1）、defs: 定义滤镜，defs是一个定义标签。

2）、滤镜的属性:

属性作用

x，y 提供左上角的坐标来定义在哪里渲染滤镜效果。(默认值:0)

width，height 绘制滤镜容器框的高宽(默认都为100%)

result 用于定义一个滤镜效果的输出名字，以便将其用作另一个滤镜效果的输入（in)

in 指定滤镜效果的输入源，可以是某个滤镜导出的result，也可以是下面6个值

3）、<feOffset>: 使用偏移滤镜。

4）、<feColorMatrix>: 用来转换偏移的图像使之更接近黑色的颜色feColorMatrix 通过values

属性来控制阴影颜色。

5)、<feGaussianBlur> : 阴影模糊滤镜 stdDeviation:属性设置模糊度。

6）、<feBlend> :使用混合滤镜，主要是将原始标签显示出来。

7）、

svg滤镜属性：
feBlend：与图像相结合的滤镜	feColorMatrix：用于彩色滤光片转换
feComponentTransfer	feComposite
feConvolveMatrix	feDiffuseLighting
feDisplacementMap	feFlood
feGaussianBlur：模糊滤镜	feImage
feMerge：多滤镜叠加滤镜	feMorphology
feOffset：过滤阴影	feSpecularLighting
feTile	feTurbulence
feDistantLight：用于照明过滤	fePointLight：用于照明过滤
FeSpotLight：用于照明过滤

8）、in属性的6个取值

svG filter中的 in属性，指定滤镜效果的输入源，可以是某个滤镜导出的 result也可以是下面6个值:

in属性的6个取值
in取值	作用
SourceGraphic	该关键词表示图形元素自身将作为<filter>原语的原始输入。
SourceAlpha	该关键词表示图形元素自身将作为〈filter>原语的原始输入，SourceAlpha与SourceGraphic具有相同的规则除了SourceAlpha只使用元素的非透明部分。
Backgroundlmage	与 SourceGraphic类似，但可在背景上使用。需要显式设置 BackgroundAlpha与SourceAlpha类似，但可在背景上使用。需要显式设置。
FillPaint	将其放置在无限平面上一样使用填充油漆。
StrokePaint	将其放在无限平面上一样使用描边绘画。

9）、feBlend滤镜的模式：

normal — 正常
multiply — 正片叠底
screen — 滤色
darken — 变暗
lighten— 变亮

10）、案例：

<body>

    <svg width="1000" height="1000">

        <!--定义滤镜 defs是一个定义标签 -->

        <defs>

            <filter id="f1" width="200%" height="200%">

                <!-- 使用偏移滤镜 -->

                <feOffset in="SourceGraphic" result="offset1" dx="20" dy="20"></feOffset>

                    <!-- 用来转换偏移的图像使之更接近黑色的颜色feColorMatrix 通过values

                    属性来控制阴影颜色 -->

                    <feColorMatrix in="offset1" result="colorMatrix" type="matrix"

                     values="0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.5 1 0 0 0 0 1 0"></feColorMatrix>

                <!--阴影 模糊滤镜  stdDeviation:设置模糊度 -->

                <feGaussianBlur result="blur" in="colorMatrix" stdDeviation="10"></feGaussianBlur>

                <!-- 使用混合滤镜，主要是将原始标签显示出来 -->

                <feBlend in="SourceGraphic" in2="offset" mode="normal"></feBlend>

            </filter>

        </defs>

        <rect x="0" y="0" width="200" height="100" fill="red" stroke="green"

         filter="url(#f1)"></rect>

    </svg>

</body>

效果：

二、渐变色

设置渐变色使用stop标签

<radialGradient>标签中的id需要引入<rect>标签中，只有将其引入 <radialGradient>标签设置的渐变色才有效果能显示。

<linearGradient> 元素用于定义线性渐变。元素必须嵌套在<defs>标记内；<defs>标签是定义的缩写，包含特殊元素（列如渐变）的定义

线性渐变可以定义为水平、垂直或角度渐变：

当y1和x1相等且x1和x2不同时，将创建水平渐变

当x1和x2相同且y1和y2不同时，将创建垂直渐变

当x1和x2不同且y1和y2不同时，将创建角度渐变

案例1：

<body>

    <svg>

        <defs>

            <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">

                <!-- 设置渐变色 使用stop标签 -->

                <stop offset="10%" stop-color="red"></stop>

                <stop offset="40%" stop-color="yellow"></stop>

                <stop offset="60%" stop-color="blue"></stop>

                <stop offset="80%" stop-color="green"></stop>

                <stop offset="100%" stop-color="purple"></stop>

            </linearGradient>

        </defs>

        <rect x="0" y="0" width="200" height="100" fill="url(#linear)"

        stroke="green"></rect>

    </svg>

</body>

效果1：

案例2：

<body>

    <svg>

        <defs>

            <!--

                cx/cy:表示的是颜色渐变的中心点坐标

                r：表示颜色渐变的范围

                fx/fy：标示的是渐变颜色的焦点坐标

             -->

             <radialGradient id="radial" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">

                <stop offset="20%" stop-color="red"></stop>

                <stop offset="100%" stop-color="purple"></stop>

            </radialGradient>

        </defs>

        <rect x="0" y="0" width="200" height="100" fill="url(#radial)"

        stroke="green"></rect>

    </svg>

</body>

效果：

三、地理位置

getCurrentPosition()中需要传入一个回调函数

Permission denied 用户不允许地理定位

Position unavailable 无法获取当前位置

Timeout 操作超时

案例：

<body>
    <p id="location">用来显示定位信息</p>
    <input type="button" value="定位" onclick="showLocation()">
    <script type="text/javascript">
        var x = document.getElementById("location");
        // 定义一个函数来获取用户的定位信息
        function showLocation() {
            //判断是否可以定位
            if (navigator.geolocation) {
                // getCurrentPosition()中需要传入一个回调函数
                navigator.geolocation.getCurrentPosition(location_1);
            } else {
                x.innerHTML = "无法获取当前位置";
            }
        }

        function location_1(position) {
            //显示获取到的用户定位中的纬度和经度
            x.innerHTML = "纬度:" + position.coords.latitude + "经度:" + position.
            coords.longitude;
        }

        function showError(error) {
            //Permission denied 用户不允许地理定位
            // Position unavailable 无法获取当前位置
            // Timeout 操作超时
            switch (error.code) {
                case error.PERMISSION_DENED:
                    x.innerHTML = "用户不允许地理定位";
                    break;
                case error.position_DENIED:
                    a
                    X.innerHTML = "无法获取当前位置";
                    break;
                case error.TIMEOUT:
                    x.innerHTML = "操作超时";
                    break;
            }
        }
    </script>
</body>