svg图像上的混合模式

文章/答案/技术大牛

发布

1回答

ImageMagick SVG到PNG的转换会尊重混合模式吗？

svg、imagemagick、png、mix-blend-mode

ImageMagick是否具有处理SVG混合模式的能力？例如，在将SVG转换为PNG时？使用ImageMagick-7.0.8-Q16，Inkscape 0.92.1 r15371 我有一个简单的SVG，有两个矩形，红色和蓝色，蓝色上有一个“排除”的混合混合模式。它在我尝试过的任何浏览器上都能正常显示(请参阅MS Edge sshot) Inkscape将根据<e

浏览 17提问于2021-02-04得票数 0

回答已采纳

1回答

css、svg

为什么混合模式适用于普通图像(img标签)，而不适用于svg (图像标签)？看看下面的例子，以了解我想要实现的目标(我也想保持背景像第一张图片一样裁剪)： .image-wrapper { background: #70C053;filter: grayscale(100%);} <div class="image-wrapper">

浏览 18提问于2021-05-11得票数 0

2回答

带feImage和feBlend的SVG滤波器，乘法混合模式不能按预期工作

svg、alphablending、blending、svg-filters

我试图创建一个SVG，其中黑白方块是叠加在图像上使用各种混合模式。我在图片中使用带有feImage原语的过滤器，使其在feColorMatrix中部分透明，并将其与正方形与feBlend混合。normal混合模式的工作方式与我所期望的一样，但multiply没有。这些都是我在GIMP玩的时候发生的事情。 SVG规范在这里有各种混合</em

浏览 6提问于2013-08-02得票数 2

回答已采纳

1回答

SVG中的混合模式

svg、vector-graphics、svg-filters

我在SVG混合模式下遇到了一个问题。我在SVG中有四个路径，我想用公式合成它们：(1*2) + (3*4)，即路径1和路径2应该使用multiply模式混合，类似的路径3和路径4应该使用multiply模式混合，然后它们应该使用屏幕混合模式组合在一起，以产生最终的图像。

浏览 1提问于2012-01-12得票数 2

回答已采纳

1回答

混合混合模式不适用于firefox中的svg元素

css、angular、svg

我在img标签上有一个svg。svg有一个混合混合模式的元素:颜色与img混合： <path d="M456 410.5L2.5 497L3... 410.5Z" fill="white"/>这段代码在Chrome上</em

浏览 6提问于2022-01-06得票数 -1

1回答

图像背景-混合模式与灰度的结合

css、image、background、grayscale、blending

我知道背景混合模式是一个新的css功能，但我想知道它是否在任何方面能够结合在css中的过滤技术。基本上，我试图实现的是一个图像从全彩色变成去饱和和混合到一个彩色背景在悬停(混合模式乘)。下面是我尝试过的一个例子，你可以看到红色图像工作得很好，因为它是深色的，但是对于橙色和黄色，原始图像的颜色通过黄色显示，因为它们更暗，所以<e

浏览 1提问于2014-07-25得票数 3

回答已采纳

1回答

使用pyvips绘制多条多段线

polygon、polyline、vips

最近，我遇到了不需要使用draw_mask和draw_image方法就可以做到这一点的loadsvg_buffer方法。有人能给我一个使用loadsvg_buffer、draw_mask或draw_image的填充示例吗？文档并没有太多帮助。欢迎任何其他见解。

浏览 10提问于2019-07-24得票数 1

1回答

CSS叠加和屏幕混合模式在手机和膝上型电脑上看起来不同

css、mix-blend-mode

我试图为一个项目的网站使用混合模式，但我发现它们在我的手机浏览器( iphone 7上的chrome 78.0.3904.84 )和我的笔记本电脑上的浏览器(mac上的chrome v 78.0.3904.97据我所知，两种浏览器都支持混合模式，所以我不确定有什么不同。正在混合的元素的代码是： .GraphButton

浏览 3提问于2019-11-15得票数 0

回答已采纳

3回答

CSS灰度滤镜和背景混合模式在同一时间？

css、background、css-filters、background-blend-mode

我正在尝试以photoshop文件中的方式处理图像-将图像去饱和化到灰度，然后应用具有倍增混合模式的颜色覆盖。为此，我使用...设置CSS背景图像的样式。webkit-filter: grayscale(1); filter: grayscale(1); background-color

浏览 9提问于2014-09-15得票数 14

回答已采纳

1回答

使用前景图像作为背景图像的alpha蒙版

html、css

我正在尝试将两个图像(一个是gif)混合在一起，并且只在前景图像显示的地方显示背景图像。例如:如果前景图像是一个"T“，背景图像是一个紫色的"X”，我希望看到 📷 我尝试过使用背景混合模式，但这并没有改变什么。一些与我的代码类似的代码，产生了我不想实现的结果： img { background-image: url("https:/

浏览 17提问于2020-03-26得票数 0

回答已采纳

2回答

我怎样才能把纯色的图像与文字的颜色相匹配？

css

在一个网站上，用户可以提交包含图像的文本帖子，也可以更改网站的各种格式，例如文本颜色，我希望允许他们提交与浏览者选择的任何文本颜色相匹配的图像。例如，如果有人想在他们的帖子中包含一个复杂的数学公式，他们现在要么使用非常奇怪的符号，要么提交一个图像。读者可能无法很好地看到这个图像，或者，如果他们选择了某些背景色。在我希望实现的系统中，有人可以提交一个带有不同alpha通道的<

浏览 4提问于2015-03-08得票数 0

回答已采纳

3回答

将SVG过滤器应用于div的背景色

html、css、svg、svg-filters

我有一个<div>，它的背景色就在图像前面.我试图使用SVG应用乘法效果，这样div后面的背景图像就可以通过： <filter id="multiply"> </filter>不幸的是，只有坚实的背景颜

浏览 2提问于2015-07-01得票数 1

回答已采纳

2回答

防止与α通道重叠的数字相互遮荫？

svg、mix-blend-mode

考虑一个SVG，它有两个部分重叠的圆圈，都带有fill="currentColor"。我不控制当前颜色的值，可以通过我无法控制的代码将其设置为任何颜色。我想避免那样做。基本上，我想让第一个图像看起来像本例中的第二个图像：<<

浏览 0提问于2018-10-18得票数 1

回答已采纳

1回答

在web上下文中的颜色混合选项(乘)？

css、animation、svg、adobe-illustrator、blending

这张图实质上是3个重叠的甜甜圈(由于“明显的原因”，现在不能发布) 一些我试过的东西。将AI文件导出为SVG并使用RaphaelJS生成动画

浏览 5提问于2015-01-06得票数 0

回答已采纳

3回答

SVG文件在SVG浏览器中的外观与Illustrator中的不同。

svg、save、adobe-illustrator

我在Illustrator中做了一些事情，我在将一个项目保存到SVG文件时遇到了问题，我在and浏览器中打开了这个文件，它看起来就不一样了。而且它只存在于SVG中，如果我将它保存到PDF或PNG中，它看起来应该如何。我做错了什么？这就是艾城的样子下面是，可以用.ai和.svg下载rar文件。

浏览 4提问于2014-03-24得票数 1

回答已采纳

3回答

使用混合过滤器(更具体地说是乘)使用SVG

svg、colors、vector-graphics、blending、svg-filters

我有一个参考图像的效果，我试图实现使用SVG。在Photoshop中，可以使用100%的不透明度，将混合模式设置为“乘”。这些颜色的十六进制值为：我尝试过一些使用SVG过滤器来实现类似效果的方法，但是我很难理解混合模式是如何计算值的。 SVG

浏览 6提问于2013-12-10得票数 18

回答已采纳

1回答

重叠图表序列的混合模式？

svg、highcharts

有没有办法在HighCharts中模仿Photoshop的图层混合模式和图表内容？例如，我有两个重叠的区域类型系列，而不是在我使用的颜色上设置不透明度(使用rgba)，我希望将重叠区域设置为倍增或线性加深。例如，请参阅附加的图像。这样做的另一个好处是，下面的网格线甚至更多地定义在彩色区域下。

浏览 0提问于2012-07-25得票数 1

回答已采纳

1回答

如何序列化svg以使其适合cookie

php、serialization、cookies、image-processing、svg

我需要序列化svg图像，以便可以将其存储到cookie中。我需要设置cookie，然后在它们返回时对svg图像进行反序列化。因此，基本上我的问题归结为将svg序列化为可以存储在cookie中的内容。我该怎么做呢？我知道php中有serialize()和unserialize()，但是serialize接受了一个混合值，我不确定svg是否属于这一类。我研究了一下混合值，它看起来可以接受struct、

浏览 0提问于2012-07-10得票数 3

1回答

SVG中的图表与HTML5画布

html、canvas、svg

我想开始一个项目，在这个项目中，当我单击一些元素时，需要绘制由圆角矩形组成的图，圆角矩形用线连接，并执行JavaScript操作。这需要在所有现代浏览器中工作。SVG和HTML5 Canvas似乎都能做到这一点，所以我想知道哪一个是最好的。另外，我不想重复发明轮子，所以如果有库可以做这样的事情，我想知道；我看了Raphaël和其他一些JavaScript绘图库，但它们没有提供我需要的所有功能。在Google的API中有这样一个工具，但它是非常有限的。

浏览 0提问于2012-04-26得票数 7

回答已采纳

1回答

显示拉伸的SVG路径的图像模式

svg、background-image

我有一个长方形的div，在这里我添加了一个background-color，和一个带有重复的background-image，这样半透明的图像与背景颜色混合，并为我的内容制作了一个彩色图案的背景。我从中获取了一个模式，即:维度中的300px × 295px。下面是代码： background-image: url('..使用生成SVG路径背景图像。> 最后，我得到

浏览 4提问于2019-10-12得票数 0

点击加载更多

ImageMagick SVG到PNG的转换会尊重混合模式吗？