所以我想知道是否可以在SVG元素中添加斜角和浮雕？
我的矩形元素的CSS是这样的：
rect {
fill: #e8e9eb;
stroke: black;
stroke-width: 1px;
width: 70;
height: 30;
}@H_403_5@
-webkit-Box-shadow: inset 0 1px 0 rgba(255,255,.5),inset 0 -2px 0 rgba(0,.25),inset 0 -3px 0 rgba(255,.2),0 1px 0 rgba(0,.1);
-moz-Box-shadow: inset 0 1px 0 rgba(255,.1);
Box-shadow: inset 0 1px 0 rgba(255,.1);@H_403_5@
我相信它不起作用的原因是因为它使用填充而不是背景,但我不确定.有没有办法在使用填充CSS样式时执行此操作？如果没有,最好的方法是什么？
解决方法
您想使用
SVG Filter effects来斜切任意SVG内容.
这是一个斜角的两个版本的例子：
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>@H_403_5@
