Тень в SVG не умножается и она разного цвета на разных фонах - PullRequest
Новая
       53

Тень в SVG не умножается и она разного цвета на разных фонах

0 голосов
/ 24 апреля 2020

У меня есть SVG с объектом и тенью по краям, проблема в том, что тень темнее на темном фоне и темнее на светлом.

Как сделать так же на любом фоне?

Обновление

Вот пример.

HTML

<div class="top">
  <div class="background-svg">
    <?xml version="1.0" encoding="UTF-8"?>
<svg class="svg" width="1219px" height="757px" viewBox="0 0 1219 757" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 64 (93537) - https://sketch.com -->
    <title>Combined Shape@1x</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <path d="M932,529 L962,564.023155 L992,529 L1536,529 C1542.07513,529 1547,533.924868 1547,540 L1547,1227 C1547,1233.07513 1542.07513,1238 1536,1238 L992,1238 L962,1202.97684 L932,1238 L387,1238 C380.924868,1238 376,1233.07513 376,1227 L376,540 C376,533.924868 380.924868,529 387,529 L932,529 Z" id="path-1"></path>

        <filter x="-3.1%" y="-5.1%" width="106.1%" height="110.2%" filterUnits="objectBoundingBox" id="filter-2">
            <feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
            <feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
            <feGaussianBlur stdDeviation="11" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
            <feComposite in="shadowBlurOuter1" in2="SourceAlpha" operator="out" result="shadowBlurOuter1"></feComposite>
            <feColorMatrix values="0 0 0 0 0.0713315217   0 0 0 0 0.0713315217   0 0 0 0 0.0713315217  0 0 0 0.755381337 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
        </filter>
    </defs>
    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="Footer" transform="translate(-352.000000, -505.000000)">
            <g id="Group-34">
                <g id="Combined-Shape">
                    <use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
                    <path stroke-opacity="0.624808785" stroke="#3A3A3A" stroke-width="2" d="M931.539867,530 L387,530 C384.238576,530 381.738576,531.119288 379.928932,532.928932 C378.119288,534.738576 377,537.238576 377,540 L377,1227 C377,1229.76142 378.119288,1232.26142 379.928932,1234.07107 C381.738576,1235.88071 384.238576,1237 387,1237 L931.539867,1237 L962,1201.43967 L992.460133,1237 L1536,1237 C1538.76142,1237 1541.26142,1235.88071 1543.07107,1234.07107 C1544.88071,1232.26142 1546,1229.76142 1546,1227 L1546,540 C1546,537.238576 1544.88071,534.738576 1543.07107,532.928932 C1541.26142,531.119288 1538.76142,530 1536,530 L992.460133,530 L962,565.560332 L931.539867,530 Z" stroke-linejoin="square" fill="#1A1A1A" fill-rule="evenodd"></path>
                </g>
            </g>
        </g>
    </g>
</svg>
  </div>
</div>
<div class="bottom"></div>

CSS

.top {
  background: #2B2B2B;
  height: 500px;
}
.bottom {
  background: #fff;
}
...