HTML – svg不锐利,但模糊

概述无论出于何种原因,这些svg文件看似模糊,并且在所有浏览器中都不是100％锐利.这些是svg文件,并且包含在缩放到像素的元素中,换句话说,使用px而不是％ – 因此没有浏览器位图错误. 知道为什么会这样吗？ 这是svg文件之一; <?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 19.0.0, SVG

无论出于何种原因,这些svg文件看似模糊,并且在所有浏览器中都不是100％锐利.这些是svg文件,并且包含在缩放到像素的元素中,换句话说,使用px而不是％ – 因此没有浏览器位图错误.

知道为什么会这样吗？

这是svg文件之一;

<?xml version="1.0" enCoding="utf-8"?><!-- Generator: Adobe Illustrator 19.0.0,SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><svg version="1.1" ID="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 vIEwBox="0 0 361.5 192.5"  xml:space="preserve"><style type="text/CSS">	.st0{fill:none;}	.st1{fill:#FC5500;}	.st2{fill:#FFFFFF;}	.st3{fill:#FB5500;}</style><g>	<path  d="M-9.4-6.3c126,252,378,0c0,68.7,137.3,206c-126,0-252,0-378,0C-9.4,131-9.4,62.4-9.4-6.3z"/>	<path  d="M-0.2,112.1c0-8,0-15.9,0-24.4c112.3,224.3,336.7,0c0-29.4,0-58.4,0-87.7c8.4,16.4,25,0		c0,46.8,93.7,140.6c-2.4-0.3-2.5-2.5-3.2-4c-3.7-9-10.3-15-19.3-18.5c-15.2-6-31.2-6.7-47.2-5.5c-7.8,0.6-15.6,1.5-23.1,4.1		c-24.8,8.7-33.9,38-18.3,59.2c5.8,7.8,14.5,10.9,23.4,13.4c2,0.6,4.9-0.1,5.6,3.1c-13.9,0-27.9,0-41.8,0		c-8.1-5.7-14.1-13.6-21.4-20.2c-1.7-1.5-3.8-2.8-4.1-5.5c0.5-2.5,2.8-3.1,4.7-3.9c9.5-4.3,14.3-11.9,14.5-22.1		c0.2-10.1-4.8-17.3-13.9-21.8c-8.5-4.2-17.6-5.3-26.7-5.5c-20.8-0.4-41.6-0.1-62.5-0.1c-1.7,0-3.3,0-4.8,0.8		c-1.6,2.3-1.1,4.9-1.1,7.3c0,21.2,42.3,63.5c0,2.6,0.5,5.4-1.7,7.6c-32,0-64,0-96.1,0c-3.2-6.9-1.5-13.8-0.9-20.2		c3.1-2.6,6-2.3,8.8-2.3c12.7-0.1,25.3,38-0.1c7.8-0.1,15.3-1.6,22.2-5.3c17.8-9.6,18.8-33.3,1.7-44.3c-8.9-5.7-19.1-6.7-29.3-6.9		c-19.3-0.3-38.7,0.1-58-0.1C4.6,113.4,2,113.8-0.2,112.1z"/>	<path  d="M120.6,192.5c0-26.6,0-53.3,0-80.7c29.5,1.5,58.7-2.6,87.6,2.2c13.5,2.2,24.2,9.5,24.9,25.1		c0.6,14.2-6.8,23.1-20.2,27c8.3,8.8,16.5,17.6,24.7,26.4c-11.2,0-22.5,0-33.7,0c-4-1.4-6-5-8.7-7.9c-12.1-13.2-6.6-11-23.7-11.2		c-5.5-0.1-10.9,0-16.4,0c-2,0-4-0.2-6,1c-1.5,3.5-0.5,7.4-0.8,11.1c-0.2,2.4,0.3,5-1.7,7.1C138,192.5,129.3,120.6,192.5z"/>	<path  d="M203.8,0.7c-4.9,6.4-10,13.1-15.2,20c-18.4,0-36.7,0-55,0c-4.1,0-9-0.2-8.9,5.9c0,6.1,4.8,5.9,9,6		c16.8,0.2,33.7-0.4,50.5,0.6c12.5,0.7,22.4,22.6,20.9c0.2,14.6-7.3,24.7-22.5,25.3c-28.5,1.2-57.1,0.3-85.9,0.3		c5-6.5,10.1-13.2,15.3-20c19.3,38.4,0.1,57.6-0.1c4.4,11.3,1.9,11.3-5.3c0.1-7.7-7-5.4-11.6-5.5c-16.1-0.4-32.4,0.3-48.4-0.9		c-13-1-21.7-8.1-21.9-22.5c-0.2-14.9,8.5-23.6,22-24.3C149.5-0.2,176.6,203.8,0.7z"/>	<path  d="M279.5,192.5c-31.5-9.3-41.2-22.1-36.9-48.9c2.8-17.6,15-26,31-29.7c18.9-4.4,38-4.4,57-0.2		c15.1,3.4,26.5,31,27c0,7.6,15.2,22.9c-2.8,16.5-15.6,27.1-34.6,28.6c-1,0.1-2-0.2-2.9,0.3		C309.1,294.3,279.5,192.5z"/>	<path  d="M77.2,20.7c-17.1,0-33.9,0-51.1,3.2,6.3,9.8c20.5,41.1,62.9,0c-5.3,6.7-9.8,12.4-14.4,18.2		c-16.2,0-32.1,0-48.5,3.6,7,10.8c22,44.1,67.6,0c-5.9,7.7-11,14.5-16,21.1c-26,0-51.6,0-77.6,0C0,53.7,27,0		c30.7,61.4,93,0C87.6,7.1,82.5,13.8,77.2,20.7z"/>	<path  d="M-0.2,112.1c25.3,50.6-0.4,75.9,0.7c20.2,0.9,32.8,13.2,32.7,29.5c-0.1,16.5-13.5,28.5-34.1,29.3		c-16.3,0.6-32.6,0.1-49.7,0.1c0,7.4,14.1,20.9c-8.1,0-16.3,0-24.8,0C-0.2,165.6-0.2,138.8-0.2,112.1z"/>	<path  d="M233.3-0.2c18.6,37-0.5,55.3,0.1c21,34.6,13.1,30.5c0,17.4-13.8,29.5-35.4,30.1		c-15.1,0.5-30.3,0.1-45.9,6.7,19.8c-8.6,0-16.6,0-25,0c0-13.4,0-26.6,0-40.7c22.6,45.3,68.1,0		c5.2,10.8-0.6,12.4-6.2c2.6-9.1-3-12.6-11.1-12.7c-22.7-0.2-45.5-0.1-69.4-0.1C222.7,13.3,227.9,6.6,233.3-0.2z"/>	<path  d="M146.7,192.5c0-6.8,0-13.6,0-20.8c13.2,26.1,39.7,0c5.6,11.6,13.7,20.8		C184.9,165.8,146.7,192.5z"/>	<path  d="M323.9,192.5c17.1-3.7,32.3-9.9,37.6-29c0,18.9,29C349,336.4,323.9,192.5z"/>	<path  d="M145.8,150.8c0-5.7,0-11.4,0-17.1c17.9,35.6-0.2,53.3,0.2c4.4,3.1,7.7,8.3c-0.1,6-4.5,8.4-9.3,8.5		C180.4,151,163.3,150.8,145.8,150.8z"/>	<path  d="M302.2,173.1c-6-0.4-11.4-0.7-16.9-1.1c-12.8-1.1-18.4-8-18.1-20.9c0.3-12.7,7.6-17.4,19-18.6		c11.1-1.1,22.3-1.2,33.4,0.1c11.3,1.3,17.2,17.3,19c0.1,11.8-5,18.7-16.7,20C314.1,172.4,307.9,172.7,302.2,173.1z"/>	<path  d="M25.1,133c15.6,30.9-0.2,46.2,0.1c5.6,11.1,1.8,11.2,8.7c0.2,7.1-5.2,9.3-11.1,9.4		c-15.3,0.3-30.6,0.1-46.3,0.1C25.1,145.5,25.1,139.6,133z"/></g></svg>

解决方法 如果你希望你的SVG最锐利,那么设计它的形状 – 特别是形状的水平和垂直部分 – 都在像素边界上.

例如,比较以下两个示例：

<svg wIDth="50" height="50">  <rect x="9.5" y="9.5" wIDth="31" height="31"/></svg><svg wIDth="50" height="50">  <rect x="10" y="10" wIDth="30" height="30"/></svg>

这是4X enlargement.

的样子

每当您的形状穿过像素中间时,由于2D渲染器使用的抗锯齿,您将获得灰色像素.

总结

以上是内存溢出为你收集整理的HTML – svg不锐利,但模糊全部内容，希望文章能够帮你解决HTML – svg不锐利,但模糊所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。