当前位置: 首页 > 知识库问答 >
问题:

SVG堆叠元素颜色重叠

仲孙翔飞
2023-03-14

我有一个SVG元素,它包含两个尺寸和位置完全相同的 子元素。两者唯一的区别是它们的颜色:第一个是红色,第二个是绿色。我注意到,即使绿色的圆圈在红色的上面,你仍然可以看到在圆圈的边缘有一点颜色偏移。我有什么办法可以避免这种颜色的变化吗?

下面是一张屏幕截图,显示了有红圈和没有红圈的情况:

这里还有我用来复制这个的小提琴。

    null

欢迎任何不同的想法。

共有1个答案

卓云
2023-03-14

你可以使用一个滤光器来调整抗锯齿条纹。这将有同样的效果,一个脆皮应该。

<svg>
    <defs>
        <filter id="edge-removal">
            <feComponentTransfer>
                <feFuncA type="table" tableValues="0 0 0 0 0 0 0 0 0 0 1" />
            </feComponentTransfer>
        </filter>
    </defs>
    <g filter="url(#edge-removal)">
    <circle r="250" cx="275" cy="275" stroke="#FF0000" fill="none" stroke-width="50"></circle>
    <circle r="250" cx="275" cy="275" stroke="#00FF00" fill="none" stroke-width="50"></circle>
    </g>
</svg>
 类似资料:
  • 问题内容: 是否有一种简单的方法可以通过将两个现有的颜色图堆叠在一起来形成新的颜色图? 我要实现的目标是制作另一个颜色编码的散点图,其中颜色映射的变量从大的负值到大的正值不等,我想将值调低到零左右- 基本上,我希望能够从股票颜色图(例如,)中选择颜色映射变量的负值,并从另一个颜色(例如,)中选择该变量的正值。 问题答案: 这未经测试,但作为第一步,我将尝试制作一个简单的子类。 类定义。 您还将需要

  • 我在我的网站上使用svg图标,想把它们的颜色改成红色(它们都是黑色的)。 我试着在img标签上使用css-fill属性,但它不起作用。然后我遇到了对象attr,并尝试使用svg图标,如下所示: 在这里,在对象上应用填充属性什么也不做。关于如何在不使用jQuery的情况下更改svg元素的填充属性的任何想法 JSFIDLE

  • 通常我们可能会认为 HTML 网页是个二维的平面,因为页面中的文本、图像或者其它元素都是按照一定顺序排列在页面上的,每个元素之间都有一定的间隙,不会重叠。然而,实际的网页其实是三维的,元素之间可能会发生堆叠(重叠),您可以通过 CSS 中的 z-index 属性来设置元素的堆叠顺序,如下图所示: 图:元素堆叠演示 每个元素都有一个默认的 z-index 属性,将 z-index 属性与 posit

  • 问题内容: 我想使用这项技术并更改svg颜色,但到目前为止我还没有做到这一点。我把它放在css中,但是无论如何我的图像总是黑色的。我的代码: 问题答案: 您不能以这种方式更改图像的颜色。如果将SVG加载为图像,则无法在浏览器中使用CSS或Javascript更改其显示方式。 如果你想改变你的SVG图像,你必须用它来装载,或使用在线。 如果要使用页面中的技术,则需要Modernizr库,您可以在其中

  • 我想使用这种技术并更改SVG颜色,但到目前为止我还没能这样做。我把这个放在CSS中,但我的图像总是黑色的,不管怎么样。 我的代码: null null

  • 对于一个项目,我们一直在使用SVG图像。我试图给它们上色,但没有成功,这是SVG: 我目前正在使用这个SVG作为一个< code>div的背景,我正在努力改变它的颜色。 以下是我尝试过的: .某些家长. cls-1{填写:#0080FF!重要;} 和 我还试图删除SVG的,但这没有效果。 这是使用SVG作为我的潜水背景的CSS: