SVG fill-opacity、stroke-opacity与opacity同时设置时的冲突

最新推荐文章于 2024-06-11 16:34:11 发布

福州司马懿

最新推荐文章于 2024-06-11 16:34:11 发布

阅读量1.1w

点赞数 1

分类专栏： SVG 文章标签： svg

转载请注明出处——https://blog.csdn.net/chy555chy

本文链接：https://blog.csdn.net/chy555chy/article/details/53352334

版权

SVG 专栏收录该内容

15 篇文章 2 订阅

订阅专栏

fill-opacity、stroke-opacity与opacity的作用

fill-opacity 用来设置填充颜色透明度（范围：0 - 1）
stroke-opacity 用来设置笔触（边框）颜色的透明度（范围：0 - 1）
opacity 用来设置元素整体（包括”填充”和”边框”）的透明值（范围: 0 到 1）

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400">
    <circle cx="80" cy="80" r="50" style="fill:pink;stroke:orange;stroke-width:5;"/>
    <circle cx="160" cy="80" r="50" style="fill:pink;stroke:orange;stroke-width:5;fill-opacity:0.1;" />
    <circle cx="240" cy="80" r="50" style="fill:pink;stroke:orange;stroke-width:5;stroke-opacity:0.1;" />
    <circle cx="320" cy="80" r="50" style="fill:pink;stroke:orange;stroke-width:5;opacity:0.1;" />
</svg>

这里写图片描述

当fill-opacity、stroke-opacity与opacity属性一起使用时，数值小的生效，结果与位置先后无关

<html>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
            <circle cx="80" cy="80" r="50" style="fill:blue;stroke:red;stroke-width:5;"/>
            <circle cx="160" cy="80" r="50" style="fill:blue;stroke:red;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.1;opacity:0.9" />
            <circle cx="240" cy="80" r="50" style="fill:blue;stroke:red;stroke-width:5;opacity:0.9;fill-opacity:0.1;stroke-opacity:0.1;" />
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
            <circle cx="80" cy="80" r="50" style="fill:yellow;stroke:green;stroke-width:5;"/>
            <circle cx="160" cy="80" r="50" style="fill:yellow;stroke:green;stroke-width:5;fill-opacity:1.0;stroke-opacity:1.0;opacity:0.1;" />
            <circle cx="240" cy="80" r="50" style="fill:yellow;stroke:green;stroke-width:5;opacity:0.1;fill-opacity:1.0;stroke-opacity:1.0;" />
        </svg>
    </body>
</html>

这里写图片描述

fill-opacity、stroke-opacity与opacity的最大值为1，最小值为0，超过该范围则认为该形状无效，不显示

<html>
    <body>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
            <circle cx="80" cy="80" r="50" style="fill:blue;stroke:red;stroke-width:5;"/>
            <circle cx="160" cy="80" r="50" style="fill:blue;stroke:red;stroke-width:5;fill-opacity:1;stroke-opacity:-5;opacity:-5;" />
            <circle cx="240" cy="80" r="50" style="fill:blue;stroke:red;stroke-width:5;fill-opacity:-5;stroke-opacity:1;opacity:-5;" />
            <circle cx="240" cy="80" r="50" style="fill:blue;stroke:red;stroke-width:5;fill-opacity:-5;stroke-opacity:-5;opacity:1;" />
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
            <circle cx="80" cy="80" r="50" style="fill:yellow;stroke:green;stroke-width:5;"/>
            <circle cx="160" cy="80" r="50" style="fill:yellow;stroke:green;stroke-width:5;fill-opacity:-5;stroke-opacity:-5;opacity:5;" />
            <circle cx="240" cy="80" r="50" style="fill:yellow;stroke:green;stroke-width:5;fill-opacity:5;stroke-opacity:5;opacity:-5;" />
        </svg>
    </body>
</html>

这里写图片描述

福州司马懿

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
SVG fill-opacity、stroke-opacity与opacity同时设置时的冲突

fill-opacity、stroke-opacity与opacity的作用<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400"> <circle cx="80" cy="80" r="50" style="fill:pink;stroke:orange;stroke-width:5;"/> <circle
复制链接

扫一扫

专栏目录