首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么SVG的笔画宽度不同于边框宽度?

SVG(Scalable Vector Graphics)是一种用于描述二维矢量图形的XML标记语言。在SVG中,笔画宽度和边框宽度是两个不同的概念。

笔画宽度是指在SVG图形中绘制路径时使用的线条宽度。它可以通过在路径元素中设置属性stroke-width来指定。笔画宽度可以是任意非负数值,单位可以是像素、百分比或其他长度单位。笔画宽度决定了路径的描边粗细,即路径周围的线条的宽度。

边框宽度是指SVG图形元素的边框的宽度。边框宽度可以通过在图形元素中设置属性stroke-width来指定。边框宽度也可以是任意非负数值,单位可以是像素、百分比或其他长度单位。边框宽度决定了图形元素周围的边框线条的宽度。

虽然笔画宽度和边框宽度都可以通过设置stroke-width属性来指定,但它们的渲染方式和作用范围是不同的。

笔画宽度只影响路径的描边,不会改变路径的形状。当路径的描边宽度大于0时,路径的描边会向路径的两侧均匀延伸,形成一个描边区域。描边区域的宽度等于笔画宽度的两倍。描边区域的中心线与路径的中心线重合,路径的实际形状位于描边区域的内部。

边框宽度则是指定图形元素的边框的宽度。边框宽度同样会向图形元素的两侧均匀延伸,形成一个边框区域。边框区域的宽度等于边框宽度的两倍。边框区域的中心线与图形元素的边界重合,图形元素的实际形状位于边框区域的内部。

因此,SVG的笔画宽度和边框宽度不同于边框宽度。笔画宽度只影响路径的描边,而边框宽度则是指定图形元素的边框的宽度。它们的渲染方式和作用范围不同,需要根据具体需求来选择使用。

腾讯云提供了一系列与SVG相关的产品和服务,例如腾讯云对象存储(COS)用于存储SVG文件,腾讯云CDN用于加速SVG文件的传输,腾讯云API网关用于提供SVG相关的API接口等。具体产品和服务的介绍可以参考腾讯云官方网站:腾讯云产品与服务

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端进阶|在手机上画一条1px细线,为什么这么难?

因为只有按照这样映射关系,一张图片在不同设备上,才会显示相同大小。 写到这里,似乎还没有讲清“为什么1px线在高清屏下会更宽”这个问题。...我用svg和css两种方式分别实现了两个100px,边框宽为1矩形;高清屏下效果如下: ...; " > stroke-width和border-width一样,将矩形边宽设为了1px,但是用svg实现矩形边框看起来却更细。...2倍,边框宽度是1px,然后将它进行图形变换transform: scale(0.5),整体宽高为0.5倍。...svg兼容性更好。 灵活性 由于svg只能画出特定形状,所以无法实现圆角边框。而伪类元素方案可以。伪类元素灵活性更好。

94010

SVG 入门指南(看完,对SVG结构不在陌生)

如下: 在 CSS 中包含 SVG 可以使用 background-image 属性来显示 SVG,如果没有固有尺寸, SVG 会被缩放为元素高度和宽度...'100' style='stroke:black'/> 笔画特性 线段可以看作画面上画出来笔画。...笔画尺寸、颜色和风格都会影响线段表现。这些特性都可以在 style 属性指定。...> 矩形 矩形是最简单基本形状,只需要其左上角 x 和 y 坐标以及它宽度(width)和高度(height),如果想要指定圆角,可以指定 rx(x方向圆角半径),该最大值是矩形宽度一半,同理...图形棱角或一系列连线形状:miter(尖,默认值)、round(圆)、bevel(平) stroke-miterlimit 相交处显示宽度与线宽最大比例,默认为4 填充颜色 属性 值 fill

2.7K20
  • SVG 入门指南(初学者入门必备)

    如下: 在 CSS 中包含 SVG 可以使用 background-image 属性来显示 SVG,如果没有固有尺寸, SVG 会被缩放为元素高度和宽度...笔画特性 线段可以看作画面上画出来笔画笔画尺寸、颜色和风格都会影响线段表现。这些特性都可以在 style 属性指定。...笔画颜色和透明度 可以通过以下几种方式指定笔画颜色: 基本颜色关键字: aqua、black、blue、fuchsia、gray、green 等 由 6 位十六进制指定颜色,形式为 #rrggbb,...矩形是最简单基本形状,只需要其左上角 x 和 y 坐标以及它宽度(width)和高度(height),如果想要指定圆角,可以指定 rx(x方向圆角半径),该最大值是矩形宽度一半,同理,ry(y 方向圆角半径...笔画特性: 属性 值 stoke 笔画颜色,默认为none stroke-opacity 笔画透明度,默认为1.0(完全不透明),值范围:0.0~1.0 stroke-dasharray 用一系列数字指定虚线和间隙长度

    3.3K21

    SVG精髓阅读笔记

    .org/1999/xlink"> 根元素svg可以用width和height二个属性定义svg像素宽和像素高 SVG一些基本元素和用法, SVG坐标原点在左上角(0,0) 元素circel...SVG作为图像,作为图像,作为CSS背景,作为对象,内联SVG SVG坐标系统 视口,文档使用画布区域称为视口,单位可以em,默认字体大小,ex 字母x高度,px像素,pt点pc12点cm厘米,...坐标,宽度和高度 下面一行代码是在4厘米*5厘米图纸上,设置每厘米16个单位坐标系统 ...属性viewBox宽高比可以不同于视口宽高比,在这种情况下SVG可以做三件事 1:按较小尺寸等比例缩放图形,以使图形完全填充视口, 2:按较大尺寸等比例缩放图形并裁剪掉超出视口部分 3:拉伸和挤压绘图以使其恰好填充新视口...Svg支持嵌套坐标系统将一个svg元素插入到一个新文档中 Svg基本形状 线段 笔画特性:stroke-width 笔画颜色stroke

    1.4K20

    【译】Web中图像技术总结,前端开发中各种图片引入优点缺点及实例

    选择正确技术很重要,并且可以在性能和可访问性方面发挥巨大作用。 在这篇文章中,我们除了提到各种包含图片方法外,还将了解到每种方法优点和缺点,以及什么时候和为什么要使用每种方法来龙去脉。...这样一来,可以使图像占据SVG整个宽度和高度,而不会被拉伸或压缩。 当 宽度较大时,它将填充其父级(SVG宽度而不会拉伸。 ?...我们目标是要有一个与图像相融合内部边框,具有实边是不实际。...解决方法是用 包裹头像,并添加一个专门用于内边框元素。...,我们可以确保边框与暗色图像融合,只有在图像颜色较浅情况下,边框才会显现出来。

    5.6K20

    SVG基础

    SVG严格遵从XML语法,并用文本格式描述性语言来描述图像内容,因此是一种和图像分辨率无关矢量图形格式,SVG于2003年成为W3C推荐标准。 示例 元素开始,包括开启标签和关闭标签,这是根元素,可以通过width和height属性可设置此SVG文档宽度和高度,version属性可定义所使用SVG版本,...用来创建一个圆。cx和cy属性定义圆中心x和y坐标。...如果忽略这两个属性,那么圆点会被设置为(0, 0),r属性定义圆半径,stroke和stroke-width属性控制形状轮廓颜色与宽度,fill属性设置形状内颜色。...用来创建一个矩形,通过x与y来定义距离左边框与距离上边框位置,width与height定义宽度与高度,style中可以直接声明属性样式,stroke和stroke-width属性控制形状轮廓颜色与宽度

    2.3K20

    【Web技术】610- Web上图片技巧

    在这篇文章中,我们将学习各种图片添加方式,以及每种方式优缺点,以及什么时候和为什么要使用每种方式上下文。 HTML 元素 在最简单情况下,image元素必须根据需要包含src属性。...这就是保持SVG全宽和全高图像原因,而不被拉伸或压缩。 当 宽度变大时,它将填充其父图像(SVG宽度而不被拉伸。..."> 而在CSS中,我们需要改变视口宽度等于或大于1350px宽度。...一个 元素 一个带有 一个带有CSS背景 SVG 到底哪家好呢?让我们一起来探讨一下。 使用HTML 大家可能首先想到是加边框吧?...,我们可以确保边框与暗色图像融合,只有在图像颜色较浅情况下,边框才会显现出来。

    2.9K30

    前端运用图片技巧总结

    在这篇文章中,我们将学习各种图片添加方式,以及每种方式优缺点,以及什么时候和为什么要使用每种方式上下文。 HTML 元素 在最简单情况下,image元素必须根据需要包含src属性。...这就是保持SVG全宽和全高图像原因,而不被拉伸或压缩。 当 宽度变大时,它将填充其父图像(SVG宽度而不被拉伸。...="sm-logo.svg"alt="Smashing Magazine"> 而在CSS中,我们需要改变视口宽度等于或大于1350px宽度。...一个 元素 一个带有 一个带有CSS背景 SVG 到底哪家好呢?让我们一起来探讨一下。 使用HTML 大家可能首先想到是加边框吧?...,我们可以确保边框与暗色图像融合,只有在图像颜色较浅情况下,边框才会显现出来。

    2.6K20

    SVG 线条动画基础入门知识

    3、SVG 是可伸缩 4、SVG 图像可在任何分辨率下被高质量地打印 5、SVG 可在图像质量不下降情况下被放大 6、SVG 图像中文本是可选,同时也是可搜索(很适合制作地图) 7、...SVG 可以与 Java 技术一起运行 8、SVG 是开放标准 9、SVG 文件是纯粹 XML 10、SVG 主要竞争者是 Flash。...button垂直水平居中、shape透明填充,边框宽度4px,边框颜色#1199ff。...css 中 border-width,给 svg 图形设定边框宽度; stroke:类比 css 中 border-color,给 svg 图形设定边框颜色; stroke-linejoin |...stroke-linecap:设定线段连接处样式; stroke-dasharray:值是一组数组,没数量上限,每个数字交替表示划线与间隔宽度; stroke-dashoffset:则是划线与间隔偏移量

    2.9K30

    WPF 形状 StrokeThickness 属性对边框影响

    在 WPF 中,形状可以使用 StrokeThickness 定义边框粗细,而边框和形状元素大小关系受到这个属性影响。...换句话说就是上面代码设置矩形宽度高度是 100 那么矩形无论设置 StrokeThickness 属性是多少,都不会影响视觉上矩形宽度和高度 ?...我比较推荐 WPF 这个设计,固定了矩形宽度和高度,那么边框大小是向内。...因为这样设计起来比较好计算 而 SVG 行为和 WPF 不相同,在 SVG 里面是使用矩形边框作为中心,向两边填充。...我比较不推荐 SVG 设计,因为这样子意味着如果修改了矩形边框,那么矩形视觉大小也就被更改了 Ellipse 对于封闭其他图形,如 Ellipse 来说,行为和矩形相同,都是向内撑开,如下面代码

    2.7K21

    自定义控件详解(一):Paint类与Canvas类

    颜色、线条宽度、线条透明度等熟悉。   ...Style.FILL ,即 画笔填充 ,比如你要画一个矩形,那么这个矩形内部是填充了 ?   Style.STROKE ,即画笔画只有边框, ?   ...Style.FILL_AND_STROKE ,即边框线条和内部填充都有 ?   2、paint.setShadowLayer(10, 15, 15, Color.GREEN);//设置阴影 ?    ...三、实践   我们写几个例子,用Paint控制画笔线条宽度,颜色等属性           用Canvas控制画出形状   首先自定义一个类继承自 View 类 重写三个构造方法 ?  ...横向直线 canvas.drawRect(200,420,600,520,paint); //画一条左上角坐标(200,420) ,宽度400 高度100 红色实心矩形

    83140

    HTML常见面试题

    1. svg标签目的是什么?...完全透明),而它所占据空间位置仍然存在,也即是说它仍具有高度、宽度等属性值。...标准盒子模型:宽度=内容宽度(content)+ border + padding + margin 低版本IE盒子模型:宽度=内容宽度(content+border+padding)+ margin...为什么要初始化CSS样式 因为浏览器兼容问题,不同浏览器对有些标签默认值是不同,如果没对CSS初始化往往会出现浏览器之间页面显示差异。 15. 为什么会出现浮动和什么时候需要清除浮动?...清除浮动方式? 浮动元素碰到包含它边框或者浮动元素边框停留。由于浮动元素不在文档流中,所以文档流块框表现得就像浮动框不存在一样。浮动元素会漂浮在文档流块框上。

    9710

    CSS提高文字对比度

    将您 JavaScript 提升到一个新水平:前端大师. 网络上字体本质上是基于矢量图形。这就是为什么您可以以 12px 或 120px 显示它们并且它们保持清晰和相对锐利原因。...结合 同时使用笔触和阴影会产生很好效果。让我们继续使用 WebKit 笔画、全方位文本阴影笔画以及更深文本阴影笔画。...不幸是,对于 CSS 和 Illustrator 来说,不可更改默认设置是居中。解决方案只是不要对笔触边框厚度过于疯狂,一切都应该没问题。...您还可以在不规则线条上设置文字(例如围绕圆形)。用网络文本来做这件事当然很酷。也许我们可以设置文本跟随其父元素边框路径。...就关键帧动画而言,笔画颜色会设置动画,但笔画宽度不会(很奇怪)。

    1.4K30
    领券