`
oliver_you
  • 浏览: 6935 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

如何让SVG中1px的线条显示更清晰

svg 
阅读更多

在SVG中,画矩形框Rect,如果stroke-width:1px, 在浏览器下看边线变粗,不清晰,用PS看已经变成了2px。

具体解决办法参见链接:http://kilianvalkhof.com/2010/design/the-problem-with-svg-and-canvas

注意:Erik的comments:

 

For svg you can try the following:

- on the root svg element adjust the ‘viewBox’ attribute until you get the desired result for lines/rects in the svg (similar to adding 0.5px everywhere, but in one place instead of many).
- use ‘shape-rendering: optimizeSpeed’ to disable anti-aliasing on any (or some) elements. Since it’s a CSS property you can easily write a selector that applies it only to the elements you want.

 

修改前效果:

修改后的效果:

 

 

  • 大小: 892 Bytes
  • 大小: 849 Bytes
分享到:
评论

相关推荐

    解决SVG画线line-polyline、矩形rect等线条的stroke-width=1px属性,显示结果变宽成为2px的问题,以及文字模糊的问题

    然而,在某些情况下,设置stroke-width为1px时,线条在屏幕上实际显示可能会变得比预期更宽,看起来像是2px。这个问题主要与SVG的渲染机制和设备像素比有关。 SVG是基于矢量的,这意味着它的元素在任何尺寸下都能...

    HTML5 SVG绘制线条箭头稳步上升动画特效

    相比于位图,SVG图像具有清晰度不变、体积小、可缩放等优点,特别适合用于创建复杂的图形和动画。 本示例中的"HTML5 SVG绘制线条箭头稳步上升动画特效"是一个典型的SVG应用,其核心目标是通过SVG元素和CSS3动画来...

    SVG基本图形元素.pdf

    SVG中的图形可以使用CSS或者内联样式来定义其外观,包括颜色、线条样式、填充、透明度等属性。例如,你可以设置`stroke`(边框颜色)、`stroke-width`(边框宽度)、`fill`(填充颜色)等。 二、线段 (`<line>`) ...

    CSS3 SVG波浪线条动画特效.zip

    在我们的案例中,“CSS3 SVG波浪线条动画特效”就是利用SVG元素创建的波浪形状,并通过CSS3的动画功能实现动态效果。 要创建波浪线条,我们需要在SVG中定义一个路径(`<path>`)元素。这个路径的形状由一系列指令...

    用svg制作富有动态的tooltip

    SVG是一种基于XML的矢量图形格式,它允许在网页上创建清晰、可缩放且交互性强的图形。利用SVG,我们可以创建复杂的形状、线条,并通过CSS或JavaScript为其添加动态效果。 首先,让我们关注在制作动态tooltip时遇到...

    css3 svg文字轮廓边框特效

    SVG(可缩放矢量图形)是一种基于XML的图形格式,用于在网页上创建和显示清晰、高质量的矢量图像。SVG图像可以在任何分辨率下保持清晰,非常适合用于图标、图形和文字特效。 ### CSS3 SVG文字边框特效 CSS3结合SVG...

    HTML5+SVG实现的线性图表特效源码 可绘制图表区域颜色.zip

    SVG(Scalable Vector Graphics)是HTML5中的一个关键特性,它允许开发者创建清晰、可缩放的矢量图形。这个"HTML5+SVG实现的线性图表特效源码 可绘制图表区域颜色.zip"文件很可能是为开发者提供了一套用HTML5和SVG...

    在页面中画线.rar在页面中画线.rar

    SVG允许你创建矢量图形,包括线条,它们可以在任何分辨率下保持清晰。例如,创建一个红色的直线: ```html <svg width="100" height="100"> </svg> ``` 在这个例子中,`x1`和`y1`定义了线的起点,`x2`和`y2`定义...

    VML柱状图饼图线形图

    VML,全称Vector Markup Language,是一种用于在网页上呈现矢量图形的技术,它允许开发者创建出清晰、可缩放的图形,尤其在IE浏览器中,因为SVG(Scalable Vector Graphics)在旧版本的IE中不被支持,VML成为了替代...

    CSS3 SVG火柴人掉落动画特效

    在火柴人掉落动画中,SVG可以用于绘制火柴人的形状,确保无论在任何尺寸的屏幕上都能保持清晰。SVG图形可以通过内联方式直接插入HTML,或者作为外部链接引用。 ```html <svg width="100" height="200"> <!-- ...

    Indicateur-de-position-SVG-CSS:动画SVG演示位置和信息

    在这个主题"Indicateur-de-position-SVG-CSS:动画SVG演示位置和信息"中,我们将深入探讨如何利用SVG(Scalable Vector Graphics)和CSS来实现一个动态的、显示位置信息的指示器。 SVG是一种基于XML的矢量图形格式,...

    可伸缩向量图形介绍

    1. **图标和徽标**:SVG图标可以在不同尺寸下保持清晰度,非常适合网站和移动应用。 2. **图表和数据可视化**:SVG可以用来创建动态图表和数据可视化工具,利用其可交互性提高用户体验。 3. **地图和地理信息系统**...

    SVG下载按钮进度加载特效

    SVG(Scalable Vector Graphics)是一种基于XML的矢量图像格式,它允许在网页上创建和展示复杂的图形,包括形状、线条、渐变、文本等元素。与位图(如JPEG或PNG)不同,SVG图像在放大时不会失真,因为它们是数学公式...

    jquery圆形密集线条特效代码

    SVG是一种基于XML的矢量图格式,可以绘制出清晰、可缩放的图形。在jQuery中,我们可以动态创建SVG元素并添加到DOM中。 例如,创建一条线段: ```javascript var line = $("<line>").attr({ x1: 0, y1: 0, x2: ...

    CSS3 SVG绘制模拟旗帜飘动特效特效代码

    在模拟旗帜飘动的场景中,SVG可以用来绘制旗帜的基本形状,例如矩形或三角形,通过控制其边角和线条,使其看起来像一面旗帜。SVG的优势在于,即使在放大或缩小页面时,图形也能保持清晰,这使得它成为创建动画旗帜的...

    个人自用微信小程序图标.rar

    1. 图标尺寸:微信小程序要求主展示图的尺寸为48px * 48px,启动图标为128px * 128px,且需要提供不同状态下的版本(如未选中、选中等)。同时,应考虑适配不同的屏幕分辨率,确保图标在各种设备上显示清晰。 2. ...

    小程序icon图标.zip

    SVG则是矢量图格式,支持缩放不失真,适用于线条简单、需要高清晰度显示的图标。在上传时,需确保图标无背景且清晰可见。 尺寸方面,不同平台可能有不同的要求。例如,微信小程序要求提供48x48px、72x72px、96x96px...

    VML中文参考手册解析

    在实际开发中,为了确保图形在不同浏览器中都能正常显示,开发者通常需要使用条件注释或者库(如jQuery的vectorMap插件)来检测浏览器类型,并相应地使用VML或SVG。例如,以下代码片段展示了如何在HTML中启用VML: ...

    VML的最全的例子,功能很全

    SVG的语法更简洁,功能更强大,而且SVG可以与CSS3和JavaScript更好地融合,实现更多的动画效果和交互性。 **总结** VML作为一个过时的技术,虽然在现代网页开发中已不再主流,但它在历史上的角色不容忽视。理解VML...

    VML.rar_VML

    VML允许开发者用代码来描述图形的形状、线条、颜色等元素,从而创建出清晰、可缩放且不失真的图形。 **VML的基本结构** VML文档通常嵌入到HTML或XHTML中,通过`<vml>`根元素来定义图形区域。例如: ```html ....

Global site tag (gtag.js) - Google Analytics