6

ベベルとエンボスを SVG 要素に追加できるかどうか疑問に思っていましたか?

長方形要素の CSS は次のようになります。

rect {
  fill: #e8e9eb;
  stroke: black;
  stroke-width: 1px;
  width: 70;
  height: 30;
}

そして、私はこのCSSをここから取得したものに追加しようとしていました:

-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.1);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.1);
box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 0 rgba(0,0,0,.25), inset 0 -3px 0 rgba(255,255,255,.2), 0 1px 0 rgba(0,0,0,.1);

fillそれが機能しない理由は、 a ではなく を使用しているためだとbackground思いますが、よくわかりません。fillCSS スタイルを使用しているときにこれを行う方法はありますか? そうでない場合、最善の方法は何ですか？

4

2 に答える 2

14

SVG フィルター効果を使用して、任意の SVG コンテンツをベベルしたい。

ベベルの 2 つのバージョンの例を次に示します:
http://jsfiddle.net/rcd5L/

<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 120 100">
  <filter id="Bevel" filterUnits="objectBoundingBox" x="-10%" y="-10%" width="150%" height="150%">
    <feGaussianBlur in="SourceAlpha" stdDeviation="3" result="blur"/>
    <feSpecularLighting in="blur" surfaceScale="5" specularConstant="0.5" specularExponent="10" result="specOut" lighting-color="white">
      <fePointLight x="-5000" y="-10000" z="20000"/>
    </feSpecularLighting>
    <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut2"/>
    <feComposite in="SourceGraphic" in2="specOut2" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint" />
  </filter>
  <filter id="Bevel2" filterUnits="objectBoundingBox" x="-10%" y="-10%" width="150%" height="150%">
    <feGaussianBlur in="SourceAlpha" stdDeviation="0.5" result="blur"/>
    <feSpecularLighting in="blur" surfaceScale="5" specularConstant="0.5" specularExponent="10" result="specOut" lighting-color="white">
      <fePointLight x="-5000" y="-10000" z="0000"/>
    </feSpecularLighting>
    <feComposite in="specOut" in2="SourceAlpha" operator="in" result="specOut2"/>
    <feComposite in="SourceGraphic" in2="specOut2" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litPaint" />
  </filter>
  <rect width="100" height="40" filter="url(#Bevel)" />
  <rect y="50" width="100" height="40" filter="url(#Bevel2)" />
</svg>
于 2013-08-29T20:37:36.483 に答える