代码之家 › 专栏 › 技术社区 › Alexander Solonik

svg def中定义的白色线性渐变不显示白色渐变。为什么?

svg

Alexander Solonik · 技术社区 · 8 年前

我刚看过MDN文档 HERE 用于SVG中的剪切和屏蔽,并遇到以下SVG:-

    <svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>
            <linearGradient id="Gradient">
            <stop offset="0" stop-color="white" stop-opacity="0" />
            <stop offset="1" stop-color="white" stop-opacity="1" />
            </linearGradient>
            <mask id="Mask">
            <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)"  />
            </mask>
        </defs>
        
        <rect x="0" y="0" width="200" height="200" fill="green" />
        <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" />
    </svg>

我看到定义了以下两种停止颜色:-

    <stop offset="0" stop-color="white" stop-opacity="0" />
    <stop offset="1" stop-color="white" stop-opacity="1" />

但当 SVG 显示器我看不到白色,为什么?看看上面的线性渐变,我希望是白色渐变而不是红色渐变,我不太明白为什么没有白色渐变。

笔记 ::-这是一个 why 问题,不是a how-to-do-this-question

1 回复 | 直到 8 年前

ccprog 8 年前

渐变不是用来给矩形上色,而是用来定义遮罩。这个 <mask> 是从未显示的屏幕外图像,但仅用于计算应用该图像的元素。

在这种情况下,遮罩由黑色(透明)背景组成,在其上添加白色渐变,以便从黑色透明到白色不透明。将此遮罩应用于红色矩形时,黑色将转换为 opacity="0" ,白色转换为 opacity="1" 因此,在左边,下方的绿色矩形亮起,但在右边它没有亮起,你可以看到红色。

推荐文章

WebDragon · 是否可以通过在html<SVG>标签中设置特定的data-*属性来更改SVG图像中显示的文本内容?

1 年前

Paul Lovell · 为什么JavaScript中生成的SVG元素的大小与HTML中直接定义的SVG元素不同?

1 年前

man · CSS-如何具有或模拟仅适用于内部的半径边框

1 年前

McLaren · 增加笔划宽度属性后,图标将被裁剪

1 年前

docker compose · React Native中椭圆或圆角矩形视图周围的进度边界

2 年前

Lucas Martins Soares · 如何覆盖SVG图像的默认颜色?[副本]

2 年前

user2171796 · 两个M。。。Z序列相遇,背景颜色显现

2 年前

MarcelausZell · 调整svg的大小会导致额外的高度

2 年前

RaiuProGram · Svg evenoodd=“true”不起作用(用路径在Svg上打孔)

2 年前

compx · 当尝试使用Selenium选择svg时,NoSuchElements存在

2 年前