SVG Длинная тень - PullRequest
       11

SVG Длинная тень

0 голосов
/ 18 апреля 2019

Итак, у меня есть этот svg символа кода на моем сайте, и я хочу добавить длинную тень к svg.Я пытался использовать filter: drop-shadow (), но это допускает только одно смещение, я ищу ту же функцию, что и box-shadow, где я могу добавить несколько смещений для создания длинной тени.

Я использую Sass для своей стилизации и создал функцию, которая создает длинные тени для ящиков, а затем вызывается с помощью миксина, но, к сожалению, я не могу найти то же самое с svg.

У кого-нибудь есть обходные пути?

1 Ответ

0 голосов
/ 18 апреля 2019

Не совсем уверен, что вы подразумеваете под длинной тенью - но я предполагаю, что вы ищете экструзию?Вы можете сделать это, выполнив несколько смещений и используя фильтр SVG, а затем сослаться на этот фильтр из CSS.

.icon {
  width: 50px;
  height: 50px;
  filter: url(#long-shadow);
}
<img class="icon"  src="https://material.io/tools/icons/static/ic_icons_192px_light.svg">



<svg width="0px" height="0px">
<defs>
  <filter id="long-shadow" x="0%" width="130%" y="0%" height="130%">
    <feOffset dx="1" dy="1" result="layer1" in="SourceAlpha"/>
     <feOffset dx="1" dy="1" result="layer2" />
      <feOffset dx="1" dy="1" result="layer3" />
       <feOffset dx="1" dy="1" result="layer4" />
        <feOffset dx="1" dy="1" result="layer5" />
         <feOffset dx="1" dy="1" result="layer6" />
          <feOffset dx="1" dy="1" result="layer7" />
              
  <feMerge>

    <feMergeNode in="layer1"/>
    <feMergeNode in="layer2"/>
        <feMergeNode in="layer3"/>
            <feMergeNode in="layer4"/>
                <feMergeNode in="layer5"/>
                    <feMergeNode in="layer6"/>
                        <feMergeNode in="layer7"/>
                            <feMergeNode in="SourceGraphic"/>
  </feMerge>
  </filter>
</defs>
</svg>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...