Добавление фаски и тиснения к элементу SVG?

Поэтому мне было интересно, можно ли добавить фаску и тиснение к элементу 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, а не background, но я не уверен. Есть ли способ сделать это при использовании стиля fill CSS? Если нет, что было бы лучше всего?


svg css svg-filters emboss
person aug    schedule 29.08.2013    source источник

Ответы (2)


arrow_upward
14
arrow_downward

Вы хотите использовать эффекты фильтра SVG, чтобы скосить произвольное содержимое 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>
person Phrogz    schedule 29.08.2013
comment
Большое спасибо! Есть ли конкретная причина, по которой опция CSS не работает с SVG? Просто любопытно :) - person aug; 30.08.2013
comment
@aug: box-shadow определен для работы с полями css, а svg их не использует (пока что), внутри содержимого svg не происходит макета css. - person Erik Dahlström; 30.08.2013
comment
Очень круто. Для всех, кому интересно, фильтры не работают в IE9 i.imgur.com/DtLepQX.png - но сделать в IE10 - person Brian Jordan; 25.04.2014

arrow_upward
2
arrow_downward

Также попробуйте использовать это, если вы хотите такую ​​фаску.

<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 width="100" height="40" 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>
person DeWy Sady    schedule 05.02.2016