blocks|key|676049|text|我不知道有什么只有CSS的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|676050|正如您所提到的，滤镜是在SVG中创建投影效果的标准方法。SVG规范中包含了一个这样的示例。|676051|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>I'm not aware of a CSS-only solution. </p>

<p>As you mentioned, filters are the canonical approach to creating drop shadow effects in SVG. The SVG specification includes an example of this.</p>


blocks|key|892817|text|这是一个使用‘example’属性将dropshadow应用于一些svg的滤镜。如果你想控制投影的不透明度，可以看看this+example。slope属性控制为投影提供多少不透明度。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|892818|示例中的相关比特：|892819|<filter+id="dropshadow"+height="130%25">
++<feGaussianBlur+in="SourceAlpha"+stdDeviation="3"/>+
++<feOffset+dx="2"+dy="2"+result="offsetblur"/>+
++<feComponentTransfer>
++++<feFuncA+type="linear"+slope="0.5"/>+
++</feComponentTransfer>
++<feMerge>+
++++<feMergeNode/>+
++++<feMergeNode+in="SourceGraphic"/>+
++</feMerge>
</filter>
<circle+r="10"+style="filter:url(#dropshadow)"/>|code-block|syntax|javascript|892820|Box-shadow被定义为在CSS框(阅读:矩形)上工作，而svg比矩形更具表现力。阅读SVG+Primer以了解更多关于如何使用SVG过滤器的信息。|892821|entityMap|0|LINK|mutability|MUTABLE|url|http://xn--dahlstrm-t4a.net/svg/filters/arrow-with-dropshadow.svg|1|http://xn--dahlstrm-t4a.net/svg/filters/arrow-with-dropshadow-lighter.svg|2|http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#filters^0|1Z|5|7|7|0|1M|C|1|0|0|0|19|A|2|0^^$0|@$1|2|3|4|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@$9|13|A|14|1|15]|$9|16|A|17|1|18]]|E|$]]|$1|F|3|G|5|6|7|19|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1A|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|1B|8|@]|D|@$9|1C|A|1D|1|1E]]|E|$]]|$1|O|3|-4|5|6|7|1F|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]|W|$5|R|S|T|E|$U|X]]|Y|$5|R|S|T|E|$U|Z]]]]

<p>Here's an <a href="http://xn--dahlstrm-t4a.net/svg/filters/arrow-with-dropshadow.svg" rel="noreferrer">example</a> of applying dropshadow to some svg using the 'filter' property. If you want to control the opacity of the dropshadow have a look at <a href="http://xn--dahlstrm-t4a.net/svg/filters/arrow-with-dropshadow-lighter.svg" rel="noreferrer">this example</a>. The <code>slope</code> attribute controls how much opacity to give to the dropshadow.</p>

<p>Relevant bits from the example:</p>

<pre><code>&lt;filter id="dropshadow" height="130%"&gt;
  &lt;feGaussianBlur in="SourceAlpha" stdDeviation="3"/&gt; &lt;!-- stdDeviation is how much to blur --&gt;
  &lt;feOffset dx="2" dy="2" result="offsetblur"/&gt; &lt;!-- how much to offset --&gt;
  &lt;feComponentTransfer&gt;
    &lt;feFuncA type="linear" slope="0.5"/&gt; &lt;!-- slope is the opacity of the shadow --&gt;
  &lt;/feComponentTransfer&gt;
  &lt;feMerge&gt; 
    &lt;feMergeNode/&gt; &lt;!-- this contains the offset blurred image --&gt;
    &lt;feMergeNode in="SourceGraphic"/&gt; &lt;!-- this contains the element that the filter is applied to --&gt;
  &lt;/feMerge&gt;
&lt;/filter&gt;
&lt;circle r="10" style="filter:url(#dropshadow)"/&gt;
</code></pre>

<p>Box-shadow is defined to work on CSS boxes (read: rectangles), while svg is a bit more expressive than just rectangles. Read the <a href="http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#filters" rel="noreferrer">SVG Primer</a> to learn a bit more about what you can do with SVG filters.</p>


blocks|key|676167|text|我找到的最简单的方法是使用feDropShadow。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|676168|<filter+id="shadow"+x="0"+y="0"+width="200%25"+height="200%25">
++<feDropShadow+dx="40"+dy="40"+stdDeviation="35"+flood-color="#ff0000"+flood-opacity="1"+/>
</filter>|code-block|syntax|javascript|676169|在元素上：|676170|<path+d="..."+filter="url(#shadow)"/>|676171|entityMap^0|D|C|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<p>Easiest way I've found is with <code>feDropShadow</code>.</p>
<pre><code>&lt;filter id=&quot;shadow&quot; x=&quot;0&quot; y=&quot;0&quot; width=&quot;200%&quot; height=&quot;200%&quot;&gt;
  &lt;feDropShadow dx=&quot;40&quot; dy=&quot;40&quot; stdDeviation=&quot;35&quot; flood-color=&quot;#ff0000&quot; flood-opacity=&quot;1&quot; /&gt;
&lt;/filter&gt;
</code></pre>
<p>On the element:</p>
<pre><code>&lt;path d=&quot;...&quot; filter=&quot;url(#shadow)&quot;/&gt;
</code></pre>


blocks|key|676242|text|您可以使用drop-shadow()+CSS函数和rgba颜色值轻松地向svg元素添加投影效果。通过使用rgba颜色值，可以更改阴影的不透明度。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|676243|​|676244|img.light-shadow{
++filter:+drop-shadow(0px+3px+3px+rgba(0,+0,+0,+0.4));
}

img.dark-shadow{
++filter:+drop-shadow(0px+3px+3px+rgba(0,+0,+0,+1));
}|code-block|syntax|javascript|676245|<img+class="light-shadow"+src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg"+/>
<img+class="dark-shadow"+src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg"+/>|676246|676247|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>You can easily add a drop-shadow effect to an svg-element using the drop-shadow() CSS function and rgba color values. By using rgba color values you can change the opacity of your shadow.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>img.light-shadow{
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 0.4));
}

img.dark-shadow{
  filter: drop-shadow(0px 3px 3px rgba(0, 0, 0, 1));
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img class="light-shadow" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg" /&gt;
&lt;img class="dark-shadow" src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg" /&gt;</code></pre>
</div>
</div>
</p>


blocks|key|676302|text|如果你的SVG元素是<text>，你可以使用CSS属性text-shadow，没有任何问题。语法为text-shadow:+color+x-offset-px+y-offset-px+blur-px。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|676303|entityMap^0|A|6|R|B|1D|1E|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]|$9|M|A|N|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|O|8|@]|D|@]|E|$]]]|G|$]]

<p>If your SVG element is <code>&lt;text&gt;</code>, you can use the CSS property <code>text-shadow</code> without any problem. Syntax is <code>text-shadow: color x-offset-px y-offset-px blur-px</code>.</p>


<p>Is it possible to set drop shadow for an svg element using css3 , something like</p>

<pre><code>box-shadow: -5px -5px 5px #888;
-webkit-box-shadow: -5px -5px 5px #888;
</code></pre>

<p>I saw some remarks on creating shadow using filter effects. Is there an example of using css alone. Below is a working code where the cusor style is correctly applied, but no shadow effect. Please help me to get the shadow effect with least bit of code.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>svg .shadow { 
  cursor:crosshair; 
  -moz-box-shadow: -5px -5px 5px #888;
  -webkit-box-shadow: -5px -5px 5px #888;
  box-shadow: -5px -5px 5px #888; 
}	</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" baseProfile="full"  viewBox="0 0 120 70"&gt;	
    &lt;rect class="shadow" x="10" y="10" width="100" height="50" fill="#c66" /&gt;
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>


SVG drop shadow using css3

是否可以使用css3为svg元素设置放置阴影，例如box-shadow: -5px -5px 5px #888;-webkit-box-shadow: -5px -5px 5px #888;我看到一些关于使用滤镜效果创建阴影的评论。有单独使用css的例子吗？下面是一个正常工作的代码，其中正确地应用了cusor样式，但没...

问基于css3的空间矢量图形投影
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于css3的空间矢量图形投影EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问基于css3的空间矢量图形投影
EN