css - 在 Chrome 中应用 CSS 变换后,SVG 上的 CSS 阴影失真
问题描述
标题总结了它。使用下面的代码,您将看到 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 中的投影失真?
解决方案
一种替代解决方案是使用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>
推荐阅读
- angular-maps - 在Angular服务代码中将映射解析为数组
- python-3.x - python elasticsearch-dsl 返回特定键的所有唯一值
- java - springboot中如何从fcm获取通知的发送状态?
- java - (此连接已关闭。)。使用 hikari 连接 PostgreSQL 时可能考虑使用更短的 maxLifetime 值
- cuda - CUDA 11.2 是否支持向后兼容在 CUDA 10.2 上编译的应用程序?
- python - 索引一个序列 Python
- javascript - 使用 Rest Api 如何在 Vuejs 的下拉列表中加载数据?
- java - Java 编译器添加额外的 else 部分并在该 else 部分中移动最后一个 return 语句
- python - Pygame 碰撞和子弹系统
- django - 邮递员只向 Django 中的 ManyToMany 字段显示“此字段是必需的”