向 SVG 元素添加斜面和浮雕?
Posted
技术标签:
【中文标题】向 SVG 元素添加斜面和浮雕?【英文标题】:Adding bevel and emboss to an SVG element? 【发布时间】:2013-09-02 06:56:39 【问题描述】:所以我想知道是否可以为 SVG 元素添加斜角和浮雕?
我的矩形元素的 CSS 是这样的:
rect
fill: #e8e9eb;
stroke: black;
stroke-width: 1px;
width: 70;
height: 30;
我试图将这个 CSS 添加到它,取自 here:
-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
而不是background
,但我不确定。有没有办法在使用fill
CSS 样式时做到这一点?如果没有,最好的方法是什么?
【问题讨论】:
【参考方案1】:如果你想要这种斜面,也可以试试这个
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-10 -10 120 100">
<filter id="filter1" >
<feFlood flood-color="black" result="COLOR-red" />
<feMorphology operator="dilate" radius="0" in="SourceAlpha" result="STROKE_10" />
<feConvolveMatrix order="8,8" divisor="1"
kernelMatrix="1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 1" in="STROKE_10" result="BEVEL_20" />
<feOffset dx="1" dy="1" in="BEVEL_0" result="BEVEL_25"/>
<feComposite operator="out" in="BEVEL_25" in2="STROKE_10" result="BEVEL_30"/>
<feComposite in="COLOR-red" in2="BEVEL_30" operator="in" result="BEVEL_40" />
<feMerge result="BEVEL_50">
<feMergeNode in="BEVEL_40" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<rect filter="url(#filter1)" />
<path x="50" y="50" fill="#3182bd" d="M9.184850993605149e-15,-150A150,150 0 0,1 140.95389311788625,-51.30302149885031L0,0Z" filter="url(#filter1)"></path>
</svg>
【讨论】:
【参考方案2】:您想使用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%" >
<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%" >
<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 filter="url(#Bevel)" />
<rect y="50" filter="url(#Bevel2)" />
</svg>
【讨论】:
非常感谢! CSS 选项在 SVG 上不起作用的具体原因是什么?只是好奇:) @aug: box-shadow 被定义为对 css 框进行操作,而 svg 不使用这些(无论如何),在 svg 内容中没有发生 css 布局。 非常酷。对于任何好奇的人,过滤器在 IE9 i.imgur.com/DtLepQX.png 中不起作用——但在 IE10 中起作用以上是关于向 SVG 元素添加斜面和浮雕?的主要内容,如果未能解决你的问题,请参考以下文章