Искаженная CSS-тень на SVG после применения CSS-преобразования в Chrome - PullRequest
Новая
       26

Искаженная CSS-тень на SVG после применения CSS-преобразования в Chrome

1 голос
/ 25 апреля 2019

Название подводит итог. Используя приведенный ниже код, вы увидите, что падающая тень отлично выглядит в Firefox, независимо от того, применено ли преобразование или нет, но падающая тень искажается в Chrome при применении преобразования. 

 g {fill: red}
 svg {-webkit-filter: drop-shadow(0 0 10px blue); filter: drop-shadow(0 0 10px blue);}
 /* The style below will distort the drop-shadow in Chrome, but not Firefox */
 svg {-webkit-transform: scaleX(-1); transform: scaleX(-1);}
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns-xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
        viewBox="0 0 87.4 31.1" xml-space="preserve" >
          <g>
              <path d="M2,28.2l-0.5-0.5C10,19,14.8,9.5,14.9,9.4l0.6,0.3C15.4,9.8,10.6,19.4,2,28.2z"/>
              <path d="M15.1,9.9c-0.2,0-4.1-1.1-5.2-7.3l0.6-0.1c1,5.8,4.7,6.8,4.7,6.8L15.1,9.9z"/>
              <path d="M14.9,9.8c-0.1-0.2-3.3-4.6-2.1-7.9l0.6,0.2c-1.1,2.9,2,7.2,2,7.3L14.9,9.8z"/>
              <path d="M14.9,9.7c0-0.2-1.2-4.4,1.9-9.4l0.6,0.3c-2.9,4.8-1.8,8.8-1.8,8.9L14.9,9.7z"/>
              <path d="M15.4,9.9c-0.2,0-0.3,0-0.3,0l0-0.6c0,0,3.3,0.2,9-2.6l0.3,0.6C19.5,9.7,16.4,9.9,15.4,9.9z"/>
              <path d="M15.5,9.7l-0.6-0.2c0-0.1,0.4-1,3.2-3.9L18.5,6C15.9,8.8,15.5,9.6,15.5,9.7z"/>
              <path d="M21.4,12.5c-5,0-6.4-2.7-6.5-2.8l0.6-0.3l-0.3,0.1l0.3-0.1c0.1,0.1,1.5,2.8,7.1,2.4l0,0.6C22.2,12.5,21.8,12.5,21.4,12.5z"/>
              <path d="M20,10.1c-2.7,0-4.8-0.3-4.9-0.3l0.1-0.6c0.1,0,5.6,0.7,10.4-0.2l0.1,0.6C23.8,10,21.8,10.1,20,10.1z"/>
              <path d="M0.6,29.9C0.2,29.8,0,29.6,0,29.6c-0.2-0.8,0.5-1.3,1.5-2.4c0.7-0.8,2-1.3,3.6-3.3c0.7-0.4,1.3-0.6,0.4,0.4
                  c-2.5,2.7-2,2.9-3,4C1.8,29.1,1.1,29.9,0.6,29.9z"/>
          </g>
        </svg>

Есть ли способ избежать искажения тени в Chrome?

1 Ответ

1 голос
/ 25 апреля 2019

Одним из альтернативных решений будет использование transform: rotateY(180deg); вместо масштаба. 

g {fill: red}
 svg {-webkit-filter: drop-shadow(0 0 10px blue); filter: drop-shadow(0 0 10px blue);}
 /* The style below will distort the drop-shadow in Chrome, but not Firefox */
svg {transform: rotateY(180deg);}
<svg  viewBox="0 0 87.4 31.1" >
          <g>
              <path d="M2,28.2l-0.5-0.5C10,19,14.8,9.5,14.9,9.4l0.6,0.3C15.4,9.8,10.6,19.4,2,28.2z"/>
              <path d="M15.1,9.9c-0.2,0-4.1-1.1-5.2-7.3l0.6-0.1c1,5.8,4.7,6.8,4.7,6.8L15.1,9.9z"/>
              <path d="M14.9,9.8c-0.1-0.2-3.3-4.6-2.1-7.9l0.6,0.2c-1.1,2.9,2,7.2,2,7.3L14.9,9.8z"/>
              <path d="M14.9,9.7c0-0.2-1.2-4.4,1.9-9.4l0.6,0.3c-2.9,4.8-1.8,8.8-1.8,8.9L14.9,9.7z"/>
              <path d="M15.4,9.9c-0.2,0-0.3,0-0.3,0l0-0.6c0,0,3.3,0.2,9-2.6l0.3,0.6C19.5,9.7,16.4,9.9,15.4,9.9z"/>
              <path d="M15.5,9.7l-0.6-0.2c0-0.1,0.4-1,3.2-3.9L18.5,6C15.9,8.8,15.5,9.6,15.5,9.7z"/>
              <path d="M21.4,12.5c-5,0-6.4-2.7-6.5-2.8l0.6-0.3l-0.3,0.1l0.3-0.1c0.1,0.1,1.5,2.8,7.1,2.4l0,0.6C22.2,12.5,21.8,12.5,21.4,12.5z"/>
              <path d="M20,10.1c-2.7,0-4.8-0.3-4.9-0.3l0.1-0.6c0.1,0,5.6,0.7,10.4-0.2l0.1,0.6C23.8,10,21.8,10.1,20,10.1z"/>
              <path d="M0.6,29.9C0.2,29.8,0,29.6,0,29.6c-0.2-0.8,0.5-1.3,1.5-2.4c0.7-0.8,2-1.3,3.6-3.3c0.7-0.4,1.3-0.6,0.4,0.4
                  c-2.5,2.7-2,2.9-3,4C1.8,29.1,1.1,29.9,0.6,29.9z"/>
          </g>
        </svg>
...