Question

标题进行了总结。使用下面的代码，您将看到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中的阴影阴影失真？

Answer 1

一种替代解决方案是使用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>

在Chrome中应用CSS转换后，SVG上的CSS阴影变形了

1 个答案: