Question

我有一个从illustrator导出到SVG的形状。没有背景。如果这是一个PNG，我可以设置一个阴影，它会从形状开始，但是当我在SVG上设置阴影时，它不适用于它应用于隐形框的形状。

以下示例说明我的意思：

body{
  background-color: #000;
}

.oval{
  width: 500px;
  box-shadow: 10px 10px 20px #fff;
}

img{
  margin: 50px;
}

<img class="oval" src="http://gdurl.com/4EiW" alt="oval" />

如何将阴影仅应用于形状？

Answer 1

使用svg阴影的正确方法：

＆＃13;

<svg width="500" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="shadow">
      <feDropShadow dx="4" dy="8" stdDeviation="4"/>
    </filter>
  </defs>

  <ellipse cx="200" cy="80" rx="100" ry="50"
      style="fill:blue; filter:url(#shadow);"/>
</svg>

＆＃13;

更新！动画Svg：

＆＃13;

body {
  background: #E75B47;
  background-image: -webkit-linear-gradient(-89deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.00) 100%);
  background-image: -moz-linear-gradient(-89deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.00) 100%);
  background-image: -o-linear-gradient(-89deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.00) 100%);
  background-image: linear-gradient(-89deg, rgba(255,255,255,0.10) 0%, rgba(0,0,0,0.00) 100%);
  text-align: center;
}

.bolt {
  fill: hsl(7, 50%, 38%);
  filter: url(#bolt-inner-shadow);
}

.bolt.loading {
  -webkit-animation: light-pulse 3s infinite;
  -moz-animation: light-pulse 3s infinite;
  animation: light-pulse 3s infinite;
}

@keyframes light-pulse {
  1%   { fill: hsl(7, 50%, 38%); }
  50%  { fill: hsl(7, 50%, 78%); }
  100% { fill: hsl(7, 50%, 38%); }
}

@-webkit-keyframes light-pulse {
  1%   { fill: hsl(7, 50%, 38%); }
  50%  { fill: hsl(7, 50%, 78%); }
  100% { fill: hsl(7, 50%, 38%); }
}

@-webkit-keyframes pulse {
  1%   { -webkit-transform: scale(0.7); }
  25%  { -webkit-transform: scale(1.1); }
  45%  { -webkit-transform: scale(0.9); }
  63%  { -webkit-transform: scale(1.05); }
  79%  { -webkit-transform: scale(0.95); }
  100% { -webkit-transform: scale(1.0); }
}

@keyframes pulse {
  1%   { transform: scale(0.7); }
  25%  { transform: scale(1.1); }
  45%  { transform: scale(0.9); }
  63%  { transform: scale(1.05); }
  79%  { transform: scale(0.95); }
  100% { transform: scale(1.0); }
}

＆＃13;

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="258px" height="437px" viewBox="0 0 258 437" version="1.1">
  <defs>
    <filter id="bolt-inner-shadow">
      <feOffset dx="0" dy="0" />
      <feGaussianBlur
        stdDeviation="8"
        result="offset-blur"
      />
      <feComposite
        operator='out'
        in='SourceGraphic'
        in2='offset-blur'
        result='inverse'
      />
      <feFlood
        flood-color='6B2C22'
        flood-opacity='1'
        result='color'
      />
    
      <!-- Clip color inside shadow -->
      <feComposite
        operator='in'
        in='color'
        in2='inverse'
        result='shadow'
      />
    
      <!-- Put shadow over original object -->
      <feComposite
        operator='over'
        in='shadow'
        in2='SourceGraphic'
      />
    </filter>
  </defs>
  <path d="M12 240.2 L221.733736 6 L165.795158 192.5 L245.547254 191.8 L35.813518 426 L91.7520965 239.5 Z M12 240.2" class="bolt loading">
</svg>

＆＃13;

应用于svg框的Css阴影

1 个答案: