相关疑难解决方法(0)

我有以下内容:

<svg id="svgLogo1" style="left:0; top:0; position:absolute"
        width="980" height="80" viewBox="0 0 980 80" 
        xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="5" width="980" height="54" rx="6" ry="6" 
            style="stroke-width:2; xstroke:#FFF; fill:#555"/>
</svg>

我想围绕这个创造一个白色的光芒.

有什么方法可以在svg中做到这一点.我环顾四周,所有我能找到的是"影子",这不是我想要的,因为我想在矩形的四边都有一个阴影(发光).

我一直试图在我的SVG路径上应用投影.我搜索了filter选项,当应用于路径时应用:-webkit-filter: drop-shadow( -5px -5px 10px #000 );似乎没有应用.

这是我的SVG路径演示问题的小提琴

我想一个下拉阴影过滤器适用于特定的元素/路径内的内联通过CSS放置SVG,我并不需要整个图形被遮蔽,里面它只是一个元素.

.shadow {
  fill: red;
  
  -webkit-filter: 
    drop-shadow( 3px 3px 2px rgba(0,0,0,.7) );
          filter: 
    drop-shadow( 3px 3px 2px rgba(0,0,0,.7) );
}

  <svg height="150" width="150">
    <g>
<path d="M0,0 C-72,132 -72,-26 100,100"></path>
    </g>
    <g class="shadow" >
    <circle class="shadow" cx="100" cy="100" r="20"></circle>
    </g>
  </svg>

正如您在上面所看到的,我正在尝试将渐变阴影应用于SVG的红色圆圈元素,但它不起作用.

搜索我没有找到任何具体的信息,在其他SVG相关问题中只有少数评论只是声明它不适用于单个SVG元素,但没有太多解释.

UPDATE

正如@azeós在评论中指出的那样,它正在使用Firefox(v.43.0.2)正确呈现,因此这是Chrome特定的问题.无论如何,如果不按照评论中的建议使用SVG代码来制作这个交叉浏览器？

我想在SVG中写一个带红色阴影的简单矩形.我有一个简单的过滤器:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1012" height="400">
  <title>svg arrow with dropshadow</title>
  <desc>An svg example of an arrow shape with a dropshadow filter applied. The dropshadow filter effect uses feGaussianBlur, feOffset and feMerge.</desc>
  <defs>
    <filter id="dropshadow" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
     <feComponentTransfer in="SourceAlpha">
         <feFuncR type="discrete" tableValues="1"/>
         <feFuncG type="discrete" tableValues="0"/>
         <feFuncB type="discrete" tableValues="0"/>
     </feComponentTransfer>
     <feGaussianBlur stdDeviation="2"/>
     <feOffset dx="0" dy="0" result="shadow"/>
     <feComposite in="SourceGraphic" in2="shadow" operator="over"/>
   </filter>
  </defs>
  <rect rx="2" ry="2" fill="rgb(255,255,255)" x="5.25" y="5.25" width="141" height="50" fill-opacity="0.85" filter="url(#dropshadow)">
</svg>

为什么在这个例子中阴影颜色不是红色？我哪里不好？

如何在div的底部倾斜而不影响高度和宽度的响应时间。请看图片。我尝试了CSS转换属性，但无法解决此问题。我想为其应用背景重复图案和框阴影。

.mydiv
{
    height:400px;
    /*width:100%;*/
    width:350px;
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.15);
    -webkit-transform: rotate(-3.8deg);
    background:url(http://www.emoticonswallpapers.com/background/thumb/nice/nice-background-pattern-184.gif);
}

http://jsfiddle.net/harikriz92/266f31o8

我使用下面显示的代码在包装器(div)绘制形状中创建46个小圆圈;

let elem = document.getElementById('draw-shapes');
let params = { width: 1024, height: 768 };
let two = new Two(params).appendTo(elem);

for (let i = 1; i < 47; i++) {
  circle = two.makeCircle(x, y, radius);
  circle.fill = 'green';
  circle.stroke = 'white';
  circle.linewidth = 1;
  circle.id = i;
}

所有图纸都是使用Two.js库制作的.我在文档中读到我可以更改已创建元素的id,但我还需要为每个元素分配一个类.我已经尝试了从纯js setAttribute到jQuery .attr和.addClass方法的所有方法,但它们都没有用,所以我开始怀疑这是否有可能呢？如果有人知道某种方式,请告诉我如何.谢谢.

我想创建一个样式处理,类似于:

这样的事情怎么样？