svg icon + css zoom =模糊

Question

我有svg图标，div与svg背景图片 当使用css zoom（在文档上）时，图标变得模糊 这是它的外观（在图像编辑应用程序中放大）

我尝试将img元素设为不同的image-rendering属性，没有任何帮助

文档缩放时有没有办法提高质量？

修改
我的图标的类是（在css文件中设置）：

.fav {
    position: absolute;
    width: 20px;
    height: 20px;
    left: 2px;
    top: 2px;
}

在JavaScript中我正在设置背景图片（基于其他数据）：

favIco.style.backgroundImage = 'url(img/icon.svg)'; 

CSS缩放应用于层次结构中的一个父级：

root.style.zoom = zoom + '%';

Answer 1

如果你将2px高的东西扩展到130％，那么你将得到2.6px高的东西。浏览器将其渲染为两个黑色像素和一个60％灰色像素。这就是所谓的抗锯齿。

您可以做的最好的事情是打开SVG文件并将class MyComponent extends React.Component { constructor(props) { super(props); this.state = { isEligible: false, }; } componentDidMount() { store.get(storage.userKey).then(user => { if (user !== null) { // add to this if statement any other checks you need this.setState({ isEligible: true }); } }); } render() { const { building, timings } = this.props; const { isEligible } = this.state; if (building && timings && isEligible) { return ( <Button ... /> ); } return null; } } 添加到要禁用抗锯齿功能的元素上。

请参阅：How to render svg elements with crisp edges while still keeping anti-aliasing?

但是，与其提高质量相比，您可能会发现您获得的其他工件比抗锯齿更不受欢迎。

Answer 2

如果没有看到任何实际代码，很难说出错了。但是这表明，无论放大多远，都有一些保持清晰的条形并不是不可能的。是否有一些代码可以在一个片段中共享？

i {
  zoom: 5000%;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<i class="fa fa-bars" aria-hidden="true"></i>