在Javascript中向SVG drop-shadow for循环添加变量

文章/答案/技术大牛

发布

1回答

javascript、css、arrays、for-loop、dropshadow

我想要添加多个“投影”滤镜到一个SVG中，以达到3D样式的效果，边缘是一个渐变--类似于this (稍后我将添加一个间隔来对其进行动画处理)。我已经使用this生成了一个具有70个阴影的梯度数组。但是，我不能让"drop-shadow“属性与我的for循环一起工作。= -i + 'px ' + i + 'px ' + gcolor[i]; element.style.textShadow = current+appliedStyle; 我

浏览 35提问于2021-09-16得票数 2

1回答

如何将半径应用于箱体阴影？

html、css

我将框影和边框半径css应用于pp内容后滑块类。box-shadow:0px 0px 15px 0px rgb(0 0 0 / 9%); <div class="owl-stage" style="..">

浏览 6提问于2022-03-08得票数 0

回答已采纳

2回答

如何将特定的方框阴影添加到我的svg？

css、svg

所以我知道有一个类似的问题：，但我很难理解他们是如何将方框阴影特征转换为svg投影特征的。(特别是当SVG投影没有扩散半径的概念时。)我正在尝试得到这个精确的长方体阴影: box-shadow: 0px 10px 25px 0px rgba(18,103，17，0.15)； <defs>

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

1回答

为什么Chrome不显示带有<use>和Filter="url(#id)“属性的SVG？

css、google-chrome、svg

背景</svg> 参见这里的最

浏览 3提问于2016-04-21得票数 6

1回答

CSS在SVG中添加框阴影的问题

svg、css、drop-shadow

请您看一下，让我知道如何使用CSS向svg添加框影吗？我已经试过了 fill: #94d31b; -webkit-filter: drop-shadow(-5px -5px 5px #000 ); -webkit-svg-shadow: 0 0 7px #53BE12;但是他们没有给<em

浏览 1提问于2014-03-21得票数 6

回答已采纳

3回答

如何在SVG <path>中添加阴影？

css、svg

我想为从库中生成的SVG中的一些路径创建一个简单的阴影效果。我已经有效地使用<feDropShadow>向<rect>等其他SVG元素添加阴影，但是对<path>应用相同的阴影似乎要么使其消失，要么没有效果。另外，仅供参考，我试图实现的是使SVG图形的特定部分“发光”，以表示它被选中。我还会提到我的目标浏览器是google chrome，因为浏览器在SVG规范的实现上似乎有很大的不同。为了提供上下文，除了我附加到内部

浏览 0提问于2020-12-12得票数 0

2回答

SVG阴影使PNG图像在Firefox中消失。

css、firefox、svg

我正在添加一个跨浏览器兼容的阴影到一个png图像(具有透明度)。它适用于Chrome和Safari，但在Firefox中，PNG图像根本不显示。这是我的网页，标题中有鳟鱼的标志PNG图像：.shadowed {<img src="images/logo.png" class

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

回答已采纳

2回答

.png徽标上的脉动发光效果

javascript、jquery、html

我想在标志上做一个脉动发光的效果。首先，我尝试用CSS和一些jquery代码片段来解决这个问题，但这只会影响图像的矩形，而不会影响矩形内的图像本身。提前谢谢你

浏览 0提问于2013-06-25得票数 1

1回答

加载附加的SVG文件中包含的javascript库

javascript、svg

我正在尝试构建一个基于浏览器的SVG光栅程序。SVG文件可以包含影响输出的javascript代码(例如，随机更改元素的颜色)，并使用库(例如)来实现。我正在努力实施的过程是：这是必要的，因为将SVG附加到HTML元素不会运行SVG中包

浏览 1提问于2021-08-13得票数 1

2回答

如何在SVG中制作插图投影

css、svg、svg-filters

到目前为止，我发现的是一个带有feGaussianBlur的滤镜，但问题是它还会在框外添加一个阴影，这是我不想要的。这是我到目前为止得到的代码： <defs> <feGaussianBlur in="SourceAlphay="10" width="100" height="100" stro

浏览 0提问于2013-12-26得票数 12

回答已采纳

5回答

透明图像曲线轮廓(不是矩形边框)

css

我想创建一个悬停在透明图像上的边界动画，就像这样。 📷 使用css可以做到这一点吗？ (当然，不需要创建两个图像-一个没有边框，一个有边框-并在悬停时更改图像) 如果有的话，我愿意使用一个小的js库，但不是jQuery。

浏览 84提问于2018-09-08得票数 1

回答已采纳

1回答

Firefox下拉阴影CSS悬停动画在SVG上不起作用

html、css、animation、svg、drop-shadow

当你将鼠标悬停在Chrome中的徽标上时，动画就会生效。.logo_animate:hover{ drop-shadow(stroke: #fff59d;

浏览 0提问于2018-07-16得票数 0

2回答

如何使CSS投射阴影响应？

css、svg

我将下面的阴影应用于SVG图像。这样做的问题是，当网站缩小到较低的分辨率时，阴影会越来越远离图像。投影滤镜不允许使用百分比。#turqLogo img margin: auto; -webkit-filter: drop-shadow(.5em 0px 0pxblack); /* Chrome, Safari, Opera */} 有没有人有办法让阴影停留在相同的位置，

浏览 9提问于2016-09-13得票数 1

回答已采纳

1回答

如何为矩形上的文本添加SVG悬停事件？

svg、hover

我有一个包含文本的多个矩形的SVG。当悬停在矩形上时，我希望有一个小阴影。因为不能在rect元素中添加文本，所以我将其添加到之后，这意味着文本实际上显示在矩形的顶部，所以当我将鼠标悬停在文本上时，阴影不会显示。因为text在rect之后，所以我不能使用同级选择器。<svg viewBox="0 0 100 100"> <style> fill:

浏览 25提问于2021-10-18得票数 0

回答已采纳

2回答

如何使用SVG循环元素的数据-*属性

javascript、jquery

我想更新循环元素的css属性fill (例如，从蓝色到红色)，当它被jQuery .css()方法单击并通过data-*属性时。示例：svg { width: 200;circle {}jQuery(function(){, function(){ circle.css({ fill: "red" });

浏览 1提问于2016-07-23得票数 0

回答已采纳

1回答

从CSS筛选器声明中设置SVG过滤器的宽度和高度

html、css、svg、svg-filters

;我想在那些将识别它的浏览器中向SVG应用一个下拉阴影过滤器。/images/svg/filters.xml#drop-shadow');} -webkit-filter：声明在Chrome中工作，filter: url声明在Firefox中工作。这有点古怪(我可以在Ch

浏览 3提问于2014-03-17得票数 2

回答已采纳

3回答

如何通过CSS将阴影过滤器应用于SVG特定的元素/路径

css、svg、svg-filters

.shadow { drop-shadow( 3px 3px 2px rgba(0,0,0,.7) );filter: } <g> 正如您在上面看到的，我正在尝试将一个下拉阴影应用到SVG</em

浏览 4提问于2015-12-25得票数 10

回答已采纳

2回答

与Chrome相比，Safari的下垂阴影非常小

css、svg、safari

我有一个分区，其中有一个SVG作为背景图像，我试图设置一个下降阴影过滤器到它。它在Chrome和Safari中工作，但由于某种原因，它在Safari中非常小。我试着改变了一些东西，但没有结果。可能是因为SVG。或者是Mac的视网膜屏幕？但我在同一屏幕上查看两种浏览器。到目前为止，我认为这只是Safari的一个问题。background: rgba(0, 0, 0, 0) url(http://techdigy.com/wp-content/plugins/avatarsha

浏览 1提问于2013-11-15得票数 2

回答已采纳

2回答

在d3.js圆中添加投影效果

javascript、css、d3.js、svg

我想将阴影添加到d3.js圆中，在某种程度上我已经成功地做到了，但阴影是矩形的而不是圆形的。我添加阴影的方式 // create filter with id #drop-shadow var filter = defs.append("f

浏览 0提问于2016-05-11得票数 4

6回答

为什么过滤器(阴影)会导致我的SVG在Safari中消失？

css、svg、safari、mobile-safari、css-filters

今天我发现，尽管它过去运行良好，但应用程序中的SVG地图不再显示在移动Safari (iOS 9.3.1)或桌面Safari (v9.1 (11601.5.17.1) )上。我提取了SVG和一个单一的样式规则，并将它们放在CodePen上来说明发生了什么。在Chrome里，这支笔看起来会很好。在Safari，它将是完全空白的。如果您检查Safari中的DOM，您会发现路径在那里，并且它们是正确的形状。他们只是看不见而已。取消选中检查器中的样式规则将导致

浏览 0提问于2016-04-18得票数 16

回答已采纳

点击加载更多