我有一个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
回答已采纳
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
回答已采纳
我正在浏览用于在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
回答已采纳
指针属性工作，但是填充属性不工作。当我在浏览器上打开控制台并看到元素时，我可以更改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
回答已采纳
2回答
我目前正在尝试采取一个网站上使用的徽标，并将其应用于打印页面上的某个点。在这样做的时候，我想用不同的方式填充它。然而，填充效果似乎不起作用。
当我在单独的选项卡中查看logo.svg并检查它时，我可以成功地用新颜色填充它的两个组件中的每一个。
但是，当我将它作为背景图像带到打印页上的DIV中时，填充不再起作用。有人能告诉我这可能是什么原因吗？
<div class="print-logo">
</div>
.print-logo {
background: url(../img/logo.svg);
background-size: conta
浏览 1提问于2019-06-12得票数 0
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
回答已采纳
1回答
在本例中：
为什么将条形路径颜色更改为白色以外的颜色会破坏呈现？如何能够改变路径颜色？
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<style>
#stripe path {
stroke: #fff;
stroke-width: 2px;
}
.stripe {
mask: url("#mask");
}
.blue.stripe {
fi
浏览 1提问于2017-05-24得票数 1
回答已采纳
我一直在画这个圆圈，这是我的代码。
<div class="circle">
<svg height="360" width="380">
<circle cx="50" cy="50" r="50" fill="rgb(177,236,250"></circle>
<circle cx="100" cy="120" r="90
浏览 0提问于2018-12-20得票数 1
回答已采纳
我正在使用image Magick库将.svg文件转换为jpg，但它创建的是一个空白图像。我已经查看了很多论坛，但没能找出问题所在。我有一个名为abc.svg的文件，里面有以下代码；
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" width="12cm" height="12cm">
<g style="fill-opacity:0.7; stroke:black; stroke-width:0.1cm;"&
浏览 0提问于2011-08-17得票数 0
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
回答已采纳
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
回答已采纳
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回答
因此，我编写了一个C程序，它输出一个HTML文件，它应该打印出1000个SVG圆圈、矩形和椭圆。当我在浏览器中运行html文件时，它不会打印出任何形状。下面是代码的哪些部分(开头和结尾，因为它有一千行)
<!DOCTYPE html>
<html>
<head>
<title>CSC 111 Fall 2015 - Assignment 5 Part 2</title>
</head>
<body>
CSC 111 Art: <br /><svg width="800px&#
浏览 3提问于2015-10-27得票数 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
回答已采纳
我有一个SVG，里面有两个图像。每个图像都被蒙住了。我的图片1在顶部和下面的图像2。如果没有蒙面，则图像2到达图像1蒙面区域的下半部，就像您在上看到的那样。
然后，我附加了一个点击侦听器到这两个图像。
我的问题是，当它们都被屏蔽时，如果我确实点击了图像1的下半部，那么图像2的单击事件就会被触发。我认为这是因为如果图像不是蒙面的，那么图像2的一部分也会重叠到图像1的下半部，但我不明白为什么它们都会在发生这种情况时被蒙住。
在这里，我给您留下一个JSFiddle和一个。我希望它能帮助你更好地了解正在发生的事情。
<div style="display:inline-block;wi
浏览 3提问于2016-10-12得票数 0
回答已采纳
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
回答已采纳
不知道我是不是做错了？是否可以同时在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
回答已采纳
2回答
只通过svg掩码中的孔单击
、、、、
我有svg面具，它可以确定矩形的洞。在svg掩码后面，我有一些可点击的元素，我希望将事件传递给它们，但只通过洞。我已经尝试过pointer-events值，但是我只能制作整个掩码来传递事件，或者用整个掩码来捕获它们。对于一个洞，它可以简单地使用剪辑路径，只是确定洞的外部部分，但几个洞使事情变得更加困难。是否有可能避免使用剪辑路径？我也尝试过pointer-events: visiblePainted和pointer-events: painted，但没有成功。
.background {
width: 400px;
height: 400px;
background: red;
浏览 5提问于2020-07-20得票数 4
回答已采纳
1回答
我正在尝试开发一个牙齿照片，因为我需要重新绘制与事件点击完成的牙齿，但问题是，在我清理了我的svg标签后，我无法重新绘制所有我需要的对象，我首先定义了相同的坐标，我试图解决，但我无法做到。它只重画第一个元素，但另一个元素不是。
我的源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Odontograma</title>
<meta
浏览 5提问于2016-08-27得票数 0
回答已采纳
我正在旋转几个矩形在彼此之上，他们的颜色交互使用css的混合混合模式。
在所有的浏览器中都很好，但是在Android上的chrome上有一个黑色的背景，在svg的矩形形状周围产生，而它是旋转的。一旦安置到位，黑色背景就消失了。
Pen：
html：
<svg id="sl_logo" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 379.94 62.8"><g id="mark"><rect id
浏览 1提问于2017-05-27得票数 0
回答已采纳
我已经在半不透明的SVG图像中应用了颜色。背景图像是可见的，但是如何隐藏该图像呢？我已经给你的原始图像颜色应用的图像作为参考。
如何隐藏背景线？
我已经给出了一个彩色SVG标签：
<g id="svg_1" fill-opacity="0.5" style="pointer-events:inherit">
上面的标签具有填充不透明度，并且在每个路径中应用的颜色具有相同的颜色。
浏览 0提问于2016-11-11得票数 0
我从我们的设计师那里得到了一个图标来添加到我们的自定义图标字体中。该图标应该是一个圆圈与一个用户的剪裁。不幸的是，设计者没有遵循一些字体自定义原则，比如没有不透明，只使用了一种颜色。用户剪贴画在黑色圆圈上是白色的。现在，我正在尝试使用掩码将用户排除在圆圈之外。这是我尝试过的： <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id=
浏览 22提问于2019-06-19得票数 0
回答已采纳
我支持一些旧的SVG图形，我们在我们的应用程序中。我在绘制矩形的填充颜色动画时遇到了一些问题，我想知道是否有人看到过同样的问题。
我们在rec上设置了一个动画元素，结果如下所示：
<svg id="svgEle" xmlns="http://www.w3.org/2000/svg" version="1.1">
<rect id="rect"
width="100" height="100"
style="fill:#008000; stroke:#000000;
浏览 1提问于2012-06-22得票数 2
1回答
我有一个SVG元素，它基于一个圆和一个掩码来创建一个环。
守则如下：
<svg width="100%" height="100%" viewBox="0 0 300 300" version="1.1">
<defs>
<linearGradient x1="97.3756325%" y1="100%" x2="0%" y2="100%" id="gradient">
<stop
浏览 0提问于2018-08-17得票数 0
回答已采纳
1回答
我有一个.svg图标，当我将图标悬停时，我想显示一个图像。它工作在正常图标(红色方格)，但不知怎的，它不工作的.svg (黑圈)！
请伸出援手。谢谢!
HTML
<div class="red">
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
<defs>
<style>
.svg-cir
浏览 0提问于2018-11-30得票数 0
回答已采纳
1回答
我试图制作一个SVG图像，在其中我使用一组形状作为另一组的掩码。
基本上，我想要一组透明的形状，覆盖一个更大的形状并剪裁它，这样你就可以通过它们看到页面背景(因为它们是透明的)，而不是更大的形状的填充或笔画。
我试着为大形状应用一个掩码，它有一个标记指向#overlays组，但它似乎不起作用。指向一个单独的覆盖确实有效，但我不想为每个覆盖设置一个。
Codepen：
最上面的形状是SVG，下面的是我想要做的事情的图像。
这是SVG：
<svg>
<defs>
<mask id="clip-behind" >
<
浏览 2提问于2015-03-28得票数 2
回答已采纳
1回答
我对多个SVG元素的Snap.SVG和动画有一个问题。我想改变路径悬停，但我有许多相同的SVG的html。
HTML：
var svg = $('.svg-wave');
var s = Snap(svg);
var simpleCup = Snap.select('.svg-wave-normal');
var fancyCup = Snap.select('.svg-wave-hover');
var simpleCupPoints = simpleCup.node.getAttribute('d');
var fan
浏览 7提问于2018-10-17得票数 0
我正在使用SVG: rectangle shape处理形状。问题出在IE中，形状是不可见的。
对于Firefox：
<rect matrix="1,0,0,1,320,100" invmatrix="1,0,0,1,-320,-100" transform="matrix(1,0,0,1,320,100)" stroke="rgb(0,0,255)" stroke-opacity="1" stroke-width="0.5" fill="rgb(200,230,255)" fi
浏览 2提问于2013-10-18得票数 0
1回答
我真的希望这里的人能帮助我，因为我已经连续三天被困住了。
我有一个标题图像，通过使用SVG蒙版剪切出半个圆圈，这半个圆圈需要有一个彩色的笔触，但由于它是一个蒙版，它不允许我这样做。我已经尝试和搜索了所有东西，发现了这个使用SVG use标签的代码片段：。但是，我根本不能让它工作。
以下是我的SVG代码，包括白色透明笔触(据我所知)：
<div id="myCarousel" class="carousel carousel-fade slide myCarousel-slide" style="height:auto; max-height:499
浏览 0提问于2017-04-26得票数 1
3回答
在我的html中，我有透明的svg循环。我需要倒置这个svg圆圈的颜色，所以我会看到黑色圆圈与青色文字。
我尝试将.cursor__inner的fill设置为透明的filter (1)(正如您在代码片段中看到的那样)，但它没有工作。
.cursor {
position: absolute;
top: 0;
left: 0;
}
.cursor__inner {
fill: transparent;
filter: invert(1);
}
p {
color: red;
}
<svg class="cursor" width="64&
浏览 3提问于2021-09-20得票数 0
回答已采纳
我写了一个svg代码为
<svg xmlns="http://www.w3.org/2000/svg">
<g display='none'>
<animate attributeName="display" begin="3.8" dur="0.7" fill="freeze" keyTimes="0;0.1428571429;0.8571428571;1.0000000000" values="inherit;none;i
浏览 1提问于2011-09-13得票数 0
1回答
我有一个用D3创建的数据图表，其中我为每个数据点画了一个圆。 当圆重叠时，我希望将它们渲染得稍微大一些，这样当几个数据点堆积在同一位置时，您就可以看到不同之处。 我发现我可以使用dilate应用feMorphology过滤器，但我需要能够以某种方式缩放扩张，这取决于相同位置上的圆的数量。 下面是SVG演示： <svg width="400" height="120" xmlns="http://www.w3.org/2000/svg">
<filter id="dilateIfOverlapping"&g
浏览 19提问于2020-03-27得票数 1
回答已采纳
1回答
我得到了这个我无法解决的奇怪的问题。我试图写一个矩形反应组件，其中一个框梯度是一个选项。
但是我的四个三角形之间有一个缺口，我试着用它进行黑客操作(包括使用高斯模糊)来缩小这个缺口，但我似乎无法在不造成角点混乱的情况下缩小这个缺口。
<html style="margin:0;padding:0;height:100%;width:100%;">
<head>
</head>
<body style="margin:0;padding:0;height:100%;width:100%;">
浏览 2提问于2016-02-03得票数 0
回答已采纳
1回答
下面的SVG包含一个带有模糊过滤器和圆形掩码的矩形。结果是一个红色的圆圈，所以很明显，滤光片是在掩码之前应用的。在所有浏览器上，这似乎都是一样的。
<svg width="300" height="300">
<defs>
<filter id="f1">
<feGaussianBlur stdDeviation="10" />
</filter>
<mask id="m1">
<c
浏览 0提问于2018-04-12得票数 0
回答已采纳
用firefox 36复制
周旋，修复？
SVG
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="949.574px" height="625.847px" viewBox="0 0 949.574 625.847" enable-background="
浏览 0提问于2015-03-04得票数 6
回答已采纳
1回答
我正在制作一个交互式时钟，用户点击添加他们自己的图像，但我已经变得有点卡住了，即使在尝试了几个小时后，我仍然无法弄明白，所以希望有人能帮助我或为我指明正确的方向。我也是使用SVG的新手。SVG代码如下所示：
<g id="Layer_3">
<rect id="clickable9" onClick="buttonClick(evt, 9, 54, 360)" x="54" y="360" fill="#4BB749" stroke="#00
浏览 16提问于2018-02-18得票数 1
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
1回答
我正在与SVG的工作，并想创建一个透明的背景。下面的示例应该显示为一个白色圆圈，其中有一条路径。然而，整个300px的白色画布显示为一个正方形，我如何获得我想要的结果，因为我看不到画布是在哪里定义的？
<?xml version="1.0"?>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#"
浏览 2提问于2016-01-09得票数 0
回答已采纳
是否可以使用一个连续的数学函数？来设置基于x和y坐标的SVG元素的不透明度，但我不想让它变得20%不透明，而是希望使用函数sin(x)/2+sin(y)/2定义矩形在每个点上的不透明度，其中x和y是矩形内每个点的坐标。
<svg>
<rect width="100" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" fill-opacity="0.2" />
</svg>
我试着将不透明度设置为&#
浏览 2提问于2013-05-06得票数 1
2回答
我有一个svg图像，可以作为一个按钮工作。当您将鼠标悬停在按钮上时，svg填充将更改为不同的颜色，但我也希望我创建的内部阴影滤镜也能显示出来。也就是说，将不透明度从0%更改为100%。
我可以通过css转换来改变填充颜色。有没有可能用css改变滤镜的不透明度？
下面是SVG代码：
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
浏览 0提问于2015-02-18得票数 0
1回答
如何将多个SVG径向渐变放到一个SVG元素中。这是我为这个创建的一个小提琴。
我尝试了以下选项，但没有成功。
- <rect x="20" y="20" width="100" height="100" style="fill:
url(#center_origin),url(#center_origin2); stroke: black;"/>
- <rect x="20" y="20" width="100" height="
浏览 0提问于2013-06-16得票数 3
回答已采纳
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
回答已采纳
来自本网站 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
当将LevelAdjust效果应用于图像时，Qt似乎没有正确地处理边缘。
我有一套svg图标，都是用黑色绘制的。我想在飞行中轻易地改变它们的颜色。我正在试验来自LevelAdjust 1.12的QtGraphicalEffects效应。根据文档，使用minimumOutput应该以线性的方式移动颜色曲线:黑人将对应于minimumOutput，白色将为白色，中间的颜色将是minimumOutput的分段版本。
如果我尝试以下几点：
Rectangle {
height: 100
width: 100
Image {
id: iconImage
source: &#
浏览 0提问于2019-09-04得票数 1
回答已采纳
1回答
SVG路径未连接
、、、
嗨，谢谢你的帮助，
我已经用path绘制了svg，请找到我的代码
<!DOCTYPE html>
<html>
<body>
<svg height="400" width="400">
<path fill="#E94649" fill-opacity="1" stroke-width="1" stroke="transparent" stroke-linecap="butt" stroke-linejoin="r
浏览 0提问于2015-11-03得票数 0
1回答
我只是用在线服务为自己生成了一个基于SVG的加载指示器，但是每次使用它的页面加载时，我都会收到Chrome的警告，它告诉我SMIL动画受到了反对，这是相当令人讨厌的。为了摆脱它，我决定考虑用网络动画代替<animate>标签。下面是原始SVG：
<svg width='200px' height='200px' xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" clas
浏览 2提问于2016-07-29得票数 1
回答已采纳
我使用SVG过滤器
feGaussianBlur
在我的申请中。通过测试几种配置，如果我添加相同的SVG形状并将过滤器应用到它，我最喜欢这种效果。
是否有一种简单的方法可以通过将过滤器(带有特定参数)应用于目标SVG形状(以避免创建冗余和SVG元素)来实现相同的结果？
见下面的例子。我最喜欢第三圈。但是，它是通过在彼此之上添加多个圆圈来创建的。
<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feGaussianBlur -->
&l
浏览 1提问于2019-08-18得票数 0
回答已采纳
如何使用转换隐藏和显示svg元素？我试着用这个代码：
<div id="bubble"></div>
<div id="buttonHide"><button>Hide</button></div>
<div id="buttonShow"><button>Show</button></div>
d3.select("#bubble")
.append("svg")
.appen
浏览 0提问于2018-05-16得票数 3
回答已采纳
1回答
为什么每次触摸或点击时，xlink后面的区域都会出现一个浅色的矩形背景？
下面是我的SVG代码：
<svg version="1.1" viewBox="0 0 147.86 258.44" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g class="bglyr" fill="none" transform="translate(-30.575,-20.92
浏览 2提问于2019-07-18得票数 1
1回答
我想要发生的是，当你翻阅图像时，向量会出现，但我也希望文本也能显示出来。现在，文本在那里，但它始终在那里。我只希望当你悬停在图像上时它才会出现。
svg{
background:url('https://vignette.wikia.nocookie.net/lunifer-kingdom/images/f/fb/Wolf_howling_at_moon.jpg/revision/latest?cb=20140105045552');
background-size:cover;
width:40vmin; height:auto;
display:bloc
浏览 0提问于2018-10-01得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
