我衷心希望你能在这里帮助我。我在自己的应用程序中使用了几个svg图像。稍后，我将添加一个功能来减少所有svg元素的不透明度。虽然在使用本机svg元素时，这是一项微不足道的任务，但它似乎并不在图像标记中工作。
下面是一个例子：
正如您所看到的，当我将不透明度应用于组元素时，文本标记受到了影响，但是，图像标记没有受到影响。我知道，当查看.svg文件时，它只不过是原生的svg元素。但是，我仍然宁愿将不透明度降低为单个图像标记。这个是可能的吗？
非常感谢您提前！
浏览 5提问于2013-09-16得票数 5
回答已采纳
我们如何才能做到这一点？
我在函数中有SVG，如何使它在画布上透明？？目前，我的所有功能都在画布上工作。但是我发现SVG可以执行add和remove函数。我该怎么做呢？
function Add() {
var id = Math.floor(Math.random()*101+1);
x = Math.random() * 550;
y = Math.random() * 250;
if (document.getElementById('amount').value < 50){
document.get
浏览 4提问于2012-05-17得票数 4
3回答
我在网上看到的所有问题..在Adobe Illustrator CS5中有一个很酷的部分，我想把它做成一个svg，并最终用raphael.js实现(dope!)
某些图层是透明图像，在导出时会失去其透明度。文件是使用存储为web格式的svg格式从Illustrator导出的。
下面是一个简单的概念证明，svg透明度确实有效……
Illustrator 中该文件的屏幕截图
浏览器中的SVG屏幕截图
帮助!
浏览 5提问于2011-06-16得票数 1
回答已采纳
1回答
使用下面的代码绘制多于~5+的SVG线会在移动元素时造成性能波动，特别是在绘制较长的SVG线时。这只是一个自然的SVG性能限制(因为svg画布大小)，还是我的代码有什么问题？
项目运行中可以在这里看到(到目前为止只支持Chrome和Firefox，查看左下角的fps，尝试展开对象，我在启动时得到大约14fps)：
一些解释：
svg是由jQuery.svg创建的一个大的(100%*100%) SVG.rootElement元素，放置在所有的HTML下。elem1和elem2是可拖动的HTML元素，而不是SVG元素。我用一条SVG线连接elem1和elem2，当它们移动时，这条线就会跟着移动。如
浏览 0提问于2010-06-26得票数 0
回答已采纳
我尝试使用这段代码将svg映像修改为png。
filename = 'hello';
inkscapepath = '"my inkscape path"';
system( [inkscapepath ' ' filename ...
'.svg --export-area-drawing --export-png=' filename '.png'])
它将创建一个hello.png文件。如果我用windows图片查看器打开它，它看起来是fine
浏览 2提问于2014-09-11得票数 0
回答已采纳
1回答
我有两个纹理用相同的方式渲染。绿色纹理在正确的位置有正确的透明度，但当我移动前面的粉红色纹理时，它会显示应该是透明的背景颜色。
这是呈现纹理的paintGL方法的代码片段。
void OpenGLWidget::paintGL()
{
// ...
for (int i = 0; i < lights.size(); i++)
{
glUseProgram(lights[i].program);
setUniform3fv(program, "lightPosition", 1, &lights
浏览 0提问于2018-11-07得票数 1
我有一个div，它的不透明度设置为0.6，使它有点透明。嵌套在这个div中，我使用SVG添加线条和形状，我希望它是不透明的。小提琴展示了一个简单的例子：
带有红色背景的div中的绿色圆继承了带有红色背景的div的不透明度。红色div下方的绿色圆圈显示它没有任何透明度--这就是我想要看到的红色背景。
<div style="width: 160px;height: 140px;background-color: red;opacity: 0.6;">
<svg width="160" height="140">
浏览 3提问于2014-03-29得票数 1
回答已采纳
可见性设置为隐藏，但其子对象设置为可见的SVG在Safari中不加载。所有其他Chrome、Firefox和IE都可以。
样例在这里
svg {
width: 100px;
border: 1px solid green
}
svg:hover {
opacity: 0.5
}
.c {
visibility:hidden}
.c * {
visibility: visible;
}
<p>Need to create grid with 6 sided shape. Each shape needs a hover state and said hover state
浏览 3提问于2019-04-05得票数 0
我正在浏览用于在SVG中裁剪和掩蔽的MDN文档，并遇到了以下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">
浏览 1提问于2018-05-11得票数 0
回答已采纳
1回答
我有一个问题，关于JavaScript与svg的结合。我试图动画的不透明度在JavaScript。我知道我可以用CSS或者用svg的动画来做，但是我想学习JavaScript，所以我决定这么做。我使用的是setInterval，如果我要下降(从1降到0)，它工作得很好。部分"sphere.style.opacity =不透明- opac;“工作正常！但是如果我把减号改为加法动画就不起作用了。不是从0到1！我还是不明白。这是最基本的，我不明白。当然，我会更改CSS中的值。有人知道答案吗？
HTML：
<svg height="99.7%" width="99
浏览 5提问于2015-10-29得票数 0
回答已采纳
1回答
我有以下svg代码：
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<defs>
<mask id="mask" x="0" y="0" width="100" height="100">
<rect x="0" y=
浏览 5提问于2020-05-24得票数 1
回答已采纳
1回答
SVG中的默认描边和填充
、、、
我对SVG中的描边和填充默认值感到困惑。
在SVG规范()中，它说笔划属性的初始值是none --我猜这是透明的？默认笔划宽度为1，默认笔划不透明度也应为1
同样，对于填充()，缺省值应为黑色，不透明度为1
Inkscape，而浏览器似乎假设笔划=黑色，而填充是透明的-是这样的吗？有人知道默认值应该是什么吗？而且我渲染的SVG似乎有些奇怪，因为浏览器和inkscape显示的内容……
浏览 1提问于2011-11-03得票数 4
回答已采纳
因此，我试图在HTML页面中的图像上使用一个过滤器，以便用特定的颜色覆盖图像。我的样本图像是白色的：
img {
filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><defs><filter id='bronzo-filter'><feColorMatrix type='luminanceToAlpha'
浏览 4提问于2017-06-15得票数 0
回答已采纳
1回答
我需要在div上做个模糊效果。我知道，对于Chrome，我可以使用CSS3过滤器，对于IE和火狐，我必须使用SVG过滤器。我不明白为什么我的SVG过滤器不能在IE 10+中工作，而在火狐中工作得很好？
演示：
HTML
<div id="container">
<h1>test</h1>
</div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="blur">
浏览 3提问于2013-11-14得票数 6
我正在使用JS和<canvas>来渲染一个等距场景。我使用了这个SVG滤镜，这样瓷砖就有了清晰的像素边缘：
<svg width="0" height="0" style="position:absolute;z-index:-1;">
<defs>
<filter id="remove-alpha" x="0" y="0" width="100%" height="100%">
<feCo
浏览 40提问于2019-08-11得票数 0
回答已采纳
我们有一个系统，可以从路径、textPaths和上传的图像(.png是一种受支持的类型)编译SVG。
然后，我们转换.svg -> .png。这个过程在图像周围留下了一个奇怪的灰色边框(以及所有透明的边缘)，如下图所示。
有谁知道怎么解决这个问题吗？
浏览 1提问于2012-03-20得票数 0
回答已采纳
1回答
我在Ubuntu 15.10上使用Chrome 49.0.2623.87 (64位)。火狐也不起作用。
我使用svg.js编写了以下代码：
function blockmouseenterHandler(){
console.debug('mouseenter')
var mask = anatomy.frame.rect(100,100).move(0,0).addClass('hovermask').fill({ color: '#000'});
this.maskWith(mask);
}
它创建的掩码/防御：
&l
浏览 0提问于2016-03-23得票数 0
回答已采纳
1回答
SVG效应下滚动的过热原因
、、、、
我在我的页面部分创建一个SVG模糊效果。你可以在下面的片段中看到。然而，当我滚动几次时，我的CPU就会超载，我的笔记本电脑也会过热。我检查复杂的动画网站没有这个问题。我有什么问题？我的密码有问题吗？
$(window).on('load', function() {
$('.blurred-bg').each(function(index, value) {
var filterName = $(this).attr('id') + 'filtering';
$(this).prepend(
&
浏览 0提问于2018-02-28得票数 0
我已经在半不透明的SVG图像中应用了颜色。背景图像是可见的，但是如何隐藏该图像呢？我已经给你的原始图像颜色应用的图像作为参考。
如何隐藏背景线？
我已经给出了一个彩色SVG标签：
<g id="svg_1" fill-opacity="0.5" style="pointer-events:inherit">
上面的标签具有填充不透明度，并且在每个路径中应用的颜色具有相同的颜色。
浏览 0提问于2016-11-11得票数 0
2回答
我目前正在尝试采取一个网站上使用的徽标，并将其应用于打印页面上的某个点。在这样做的时候，我想用不同的方式填充它。然而，填充效果似乎不起作用。
当我在单独的选项卡中查看logo.svg并检查它时，我可以成功地用新颜色填充它的两个组件中的每一个。
但是，当我将它作为背景图像带到打印页上的DIV中时，填充不再起作用。有人能告诉我这可能是什么原因吗？
<div class="print-logo">
</div>
.print-logo {
background: url(../img/logo.svg);
background-size: conta
浏览 1提问于2019-06-12得票数 0
我想用jQuery动画化svg元素中渐变的停止不透明度，但它不起作用。动画停止颜色，然而，使用相同的代码工作。
HTML：
<svg>
<defs>
<radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="0%" style="stop-color:white;stop-opacity:1"
浏览 3提问于2013-09-03得票数 1
我有一个SVG，里面有两个图像。每个图像都被蒙住了。我的图片1在顶部和下面的图像2。如果没有蒙面，则图像2到达图像1蒙面区域的下半部，就像您在上看到的那样。
然后，我附加了一个点击侦听器到这两个图像。
我的问题是，当它们都被屏蔽时，如果我确实点击了图像1的下半部，那么图像2的单击事件就会被触发。我认为这是因为如果图像不是蒙面的，那么图像2的一部分也会重叠到图像1的下半部，但我不明白为什么它们都会在发生这种情况时被蒙住。
在这里，我给您留下一个JSFiddle和一个。我希望它能帮助你更好地了解正在发生的事情。
<div style="display:inline-block;wi
浏览 3提问于2016-10-12得票数 0
回答已采纳
我的答案是：
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 59%, rgba(0,0,0,0.65) 100%), url('/img/fondo-home.jpg') no-repeat;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(59%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,
浏览 2提问于2014-05-19得票数 2
回答已采纳
2回答
WebKit有一个错误，导致嵌入式SVG (由<embed>或<image>)具有白色背景而不是透明。
它被更正了，但在iOS上没有，因为WebKit的构建要老得多。
有什么好办法解决这个问题吗？我迫切需要透明的背景。
我知道两个次优的解决方案：
使用<img>标记。-我不能这样做，因为插入为imgs的SVG的DOM/XML树不能被遍历/操作。用自身来屏蔽<object>或<embed>元素。令人惊讶的是，如果使用SVG作为掩码，旧的WebKit可以检测到透明度，但我认为它是一个丑陋的解决方案：
<object style=&#
浏览 2提问于2011-01-20得票数 3
回答已采纳
我正在处理SVG2.2(JDK7u7)和JavaFX文件(再次;D)。我需要将SVG内容映射到FX对象。
我现在的问题是，我在我的SVG文件中定义了一个<rec> (矩形)。根据CSS样式定义：
填充不透明度:0
和
中风-不透明度:1
据我所知，我只能为一个完整的节点设置不透明度，笔画和填充不透明之间没有区别。
我也没有在中找到合适的条目。
再一次，我是错过了什么，还是我现在就被限制了？有什么提示我能解决我的棘手问题吗？
)任何帮助都是非常感谢的，因为每次:)
浏览 4提问于2012-11-09得票数 2
回答已采纳
我正在尝试使用ImageMagick (6.8.8-7)读取SVG图像，并获得有效的透明像素。
下面的代码可以很好地处理PNG格式，但对于SVG，我只能有一些白色背景。所以我试着添加了一些合并图层的MagickSetBackgroundColor和MagickSetImageBackgroundColor，但是我仍然不能让它工作。
下面是PoC的摘录：
MagickWandGenesis();
m_wand = NewMagickWand();
MagickReadImage(m_wand, file_name);
hasAlfa = MagickGetImageAlphaChannel(
浏览 8提问于2014-03-04得票数 0
1回答
我的印象是svg就像是一个canvas指令。但是，我无法让svg更改颜色。下面的部分代码使用了Kivy's github的示例中提供的代码。
with self.canvas:
Color(0.3833, 1.0, 0.0)
完整代码
import sys
from glob import glob
from kivy.uix.scatter import Scatter
from kivy.app import App
from kivy.graphics.svg import Svg
from kivy.core.window import Window
from kiv
浏览 0提问于2017-05-14得票数 3
2回答
我正在尝试创建一个具有内联SVG的HTML，该SVG具有一个带有CSS背景的元素：
<html>
<body>
<svg>
<foreignObject width="50" height="50">
<div style="red; width:50; height:50"></div>
</foreignObject>
<rect width="50" height="50" tra
浏览 4提问于2019-06-03得票数 0
指针属性工作，但是填充属性不工作。当我在浏览器上打开控制台并看到元素时，我可以更改element.style，这将影响svg组件的样式设置。
我尝试过更改element.style，并且使用了fill属性旁边的！
//React file
//This is the import
import { ReactComponent as Dot } from './dot.svg';
//code itself
<div className="home">
<Dot className="dotSvg"/>
<
浏览 0提问于2019-07-17得票数 1
回答已采纳
1回答
我希望使用SVG图形绘制RGB颜色模型，这些图形可以在调色板中使用。
可以查看渐变图像
我尝试使用SVG绘制梯度，但结果并不像预期的那样。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width=256 height=256 >
<defs>
<linearGradient id='magenta' x1=0% y1=0% x2=100% y2=100%>
<stop offset= 0% sto
浏览 1提问于2016-09-22得票数 2
回答已采纳
我正在使用imagick使用以下语法导入SVG
$graphic = new Imagick($this->img);
问题是这个图像是以白色背景导入的。如何将白色背景更改为透明背景，或者在导入SVG时使imagick保留透明背景。
浏览 1提问于2010-07-30得票数 2
回答已采纳
我有这个CSS
.jumbotron {
background: url('/background.svg');
opacity: 0.5;
}
但我希望不透明度只针对背景图像。目前，它的目标是整个巨无霸，所以字体等也是褪色的。
我试过了
.jumbotron {
background: url('/background.svg');
background: opacity: 0.5;
}
和
.jumbotron {
background: url('/background.svg');
}
.jumbotron:img {
浏览 2提问于2015-10-01得票数 0
<script type="text/javascript">
var divElem = d3.select("#svgpathSVGdata");
正方形的数据
var jsonsquare = [{
x: 40,
y: 170,
width: 120,
height: 120,
label: "technology"
},
];
设置画布，当然宽度和高度已经声明了
var svgcanvas = divElem.append("svg:svg")
浏览 1提问于2012-10-05得票数 1
回答已采纳
2回答
我正在尝试制作一些透明的svg椭圆，但是当它们接触到边缘时，颜色会变暗，有没有办法防止这种行为的发生，例如，通过使svg的重叠部分不透明，或任何其他解决方案？ ?
浏览 79提问于2021-07-02得票数 0
回答已采纳
1回答
下面是一个示例：
<svg width="200" height="200">
<rect x="50" y="50" width="100" height="100"/>
<line x1="0" y1="0" x2="200" y2="200" stroke="red" stroke-width="5" stroke-dasharray="5"/&
浏览 0提问于2018-06-20得票数 1
回答已采纳
我假设以下是图像大小的结果：
我有两台10 me的SVG (是的，它们很大)，是由一个平面设计师给我的，它应该作为客户登陆页面的背景图像。这是一个相当复杂的图形，我认为不适合SVG。我试图以各种方式调用它们，但没有成功，并且有几个(非常小的) svg映像，它们不存在任何问题，通过以下方式调用到DOM中：
<img id="logoImg" src="SvgLogo.svg" alt="OurLogo">
我认为有一个10 my的映像是有问题的，因为其他原因(虽然我还没有gzip)；然而，如果大小是我问题的根源，有人会有任何想法吗？
浏览 2提问于2016-01-13得票数 1
回答已采纳
2回答
我有一个关于画布和SVG的基本问题。我想要创建一个覆盖与洞，并填补它的一些颜色。它似乎使用画布工作，但我想尝试SVG (处理事件，例如调整大小)。
canvas.width = 200;
canvas.height = 200;
var context = canvas.getContext('2d');
//fill background
context.globalAlpha = 0.8;
context.fillStyle = "blue"
context.fillRect(0, 0, 200, 200);
context.globalCo
浏览 0提问于2018-10-31得票数 1
回答已采纳
来自本网站 https://smooth.ie/blogs/news/svg-wavey-transitions-between-sections 我生成了以下svg <div style="height: 100%; overflow: hidden;" class='parent' ><svg viewBox="0 0 500 150" preserveAspectRatio="none" style="height: 100%; width: 100%;"><path d=&#
浏览 163提问于2020-10-27得票数 0
2回答
我有这样的CSS样式：
.Right-Side-BG {
background-repeat: no-repeat;
background-attachment: fixed;
background-image: url(./white.svg), linear-gradient(to bottom, #598bd7,
#165594);
}
我需要svg图像有0.21的不透明度，我怎么做呢？
浏览 3提问于2017-11-01得票数 2
回答已采纳
请有人建议我如何将加载的矩形转换成图像的掩码？我希望能够在插画中创建我的svg矩形，所以在加载svg之前设置大小和位置。
我认为这可以在以下几个步骤中奏效。
Step1:将jpeg图像添加到svg Step2: Group rect和jpeg Step3:将rect转换为掩码/剪辑掩码。
谢谢大卫
浏览 1提问于2014-03-14得票数 3
回答已采纳
1回答
我有一个SVG径向梯度工作在Chrome，Firefox，甚至I，但不工作在Safari。知道怎么让这个在Safari工作吗？
以下是代码：
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<radialGradient r="50%" cy="50%" cx="50%" id="myRadialGradient2
浏览 2提问于2015-07-30得票数 4
回答已采纳
1回答
这是我在scss中用作游标的svg的代码。这是一个纵横的交叉线，他们目前是不透明的，几乎看不见。我需要让他们在没有不透明的情况下变成黑色，但我在代码中没有做任何改变。我在ReactJS中使用SASS css：cursor: url(crosshairs.svg), auto;。
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) EDIT: was heigh
浏览 9提问于2022-07-22得票数 -1
回答已采纳
2回答
如何将svg图像转换为具有透明背景的png。我有将近4000张svg图像要隐藏。我试图使用许多转换器，但它们不能提供透明的背景。我看到了幻影。但是我如何用它同时转换我所有的图像。我现在能做什么。
浏览 7提问于2015-07-12得票数 6
需要转换.svg文件并将其保存为.svg或jpeg格式。ImageMagick的问题是，它在白色背景下保存转换后的文件，而我非常需要它的透明。
对其他工具或clear php有什么建议吗？会很感激的。
浏览 1提问于2010-06-25得票数 2
2回答
我有一个SVG文件：
<svg version="1.1" viewBox="0 0 390 390" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<line class="arrow" opacity="0.5" stroke="#15781B" stroke-linecap="butt" stroke-width="9
浏览 3提问于2021-06-17得票数 1
回答已采纳
1回答
全,
我们真的需要一些来自SVG专家的建议。
我们所拥有的:有一个SVG画布，我们在上面映射了坐标(光标的X和Y轴位置)。当用户在SVG画布上移动光标时，坐标实时地显示在网页的左上角。
我们想要的:我们想要在SVG画布层(鼠标坐标被映射在其上)之上添加一个网格层，这样网格层始终保持在顶部，无论用户如何处理基本层。我们还希望坐标继续显示，即使网格层现在在顶部。
问题是:当我们在现有的层之上添加一个SVG网格层时，鼠标坐标停止工作(可以理解，因为它们基于现在被网格层隐藏的SVG层)。此外，由于用户将与基础层交互(他们只能显示/隐藏网格层)，我们希望他们继续做我们希望他们使用基础层做的所有事情，而不
浏览 9提问于2010-09-28得票数 0
回答已采纳
2回答
D3JS振荡泡
、、、、
这对一些人来说可能微不足道，但我是D3JS的新手。
我试图绘制两个静态气泡，不透明度变化相对于一个数组。我能画出气泡，但我不能使它们的不透明度不断变化。我使用的是transition和delay，透明度只能更改一次。这是我的代码示例
(function() {
var dropsize = 100;
var gapsize = 20;
var osc = [[1, 1],[0.5, 0.5],[0, 0],[0.5, 0.5],[1, 1],[0.5, 0.5],[0, 0],[0.5, 0.5]];
var radius = dropsize / 2;
var h =
浏览 6提问于2016-12-14得票数 1
回答已采纳
我尝试在基于的CodePen示例的SVG图像周围添加红色阴影。但是，当背景颜色为蓝色时，颜色会变为紫色。无论背景颜色或图像是什么，如何保持颜色为红色？任何帮助都是非常感谢的。
#robbie {
background-color: blue;
display: inline-block;
background-repeat: no-repeat;
background-size: cover;
}
#robbie img {
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12,
C
浏览 0提问于2017-03-25得票数 1
不知道我是不是做错了？是否可以同时在SVG中的路径上动画两个属性？这与我在Firefox中所期望的一样，但在Safari或Chrome上则不然。
示例SVG：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height=
浏览 2提问于2013-11-14得票数 0
回答已采纳
我如何放置一个复杂的SVG图像(与css-样式！)地理引用在第一层地图上，以便文档的CSS样式用于呈现SVG。
一个普通的ImageLayer在地图上将地理参考的svg显示为一个图像，做得很好。但是因为它是一个图像，所以文档的CSS对呈现的SVG没有任何影响。
另一方面，将SVG放置到DOM中，并使它对文档的CSS做出反应，并在更改CSS时做出反应。但是它总是把SVG映射到整个星球上，并且似乎隐藏了我放置在它下面的任何一层。
为了给您一个用例的概念:我们有一个外部生成的SVG，其中包含几个表示基础结构不同方面的“组或层”。这个SVG必须正确地放置在一个映射上(就像我们可以对图像层所做的那样)，
浏览 2提问于2020-11-02得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
