目前正在构建一个基于浏览器的SVG应用程序。在这个应用程序中,用户可以设置各种形状的样式和位置,包括矩形。
当我将笔画宽度应用到SVG矩形元素(比如1px)时,不同的浏览器会以不同的方式将笔画应用到矩形的偏移和插入。这被证明是很麻烦的,特别是当我试图计算一个矩形的外部宽度和视觉位置,并将其放置在其他元素旁边时。
例如:
Firefox添加了1px的插入(底部和左侧)和1px的偏移(顶部和右侧)
Chrome添加了1px的插入(顶部和左侧),和1px的偏移(底部和右侧)
到目前为止,我唯一的解决方案是自己绘制实际的边界(可能是用路径工具),并将边界定位在描边元素的后面。但这种解决方案是一种令人不快的变通方法,如果可能的话,我宁愿不走这条路。
所以我的问题是,你能控制SVG的笔画宽度如何在元素上绘制吗?
更新:笔画对齐属性在2015年4月1日被转移到一个全新的规范中,称为SVG笔画。
从2015年2月26日的SVG 2.0编辑稿开始(可能从2月13日开始),笔画对齐属性的值为inner、center(默认值)和outer。
它的工作方式似乎与@Phrogz提出的笔画位置属性和后来的笔画位置建议相同。这个属性至少从2011年就开始计划了,但除了一个注释说
SVG 2应该包括一种指定笔画位置的方法
在美国,它从未在规范中详细说明,因为它被推迟了——直到现在,似乎是这样。
据我所知,目前还没有浏览器支持这个属性,或者SVG 2的任何新特性,但希望随着规范的成熟,它们很快就会支持。这是我个人一直敦促拥有的特性,我真的很高兴它最终出现在规范中。
似乎有一些问题,关于属性应该如何在开放路径和循环上表现。这些问题很可能会延长跨浏览器的实现。但是,随着浏览器开始支持这个属性,我将用新的信息更新这个答案。
更新:笔画对齐属性在2015年4月1日被转移到一个全新的规范中,称为SVG笔画。
从2015年2月26日的SVG 2.0编辑稿开始(可能从2月13日开始),笔画对齐属性的值为inner、center(默认值)和outer。
它的工作方式似乎与@Phrogz提出的笔画位置属性和后来的笔画位置建议相同。这个属性至少从2011年就开始计划了,但除了一个注释说
SVG 2应该包括一种指定笔画位置的方法
在美国,它从未在规范中详细说明,因为它被推迟了——直到现在,似乎是这样。
据我所知,目前还没有浏览器支持这个属性,或者SVG 2的任何新特性,但希望随着规范的成熟,它们很快就会支持。这是我个人一直敦促拥有的特性,我真的很高兴它最终出现在规范中。
似乎有一些问题,关于属性应该如何在开放路径和循环上表现。这些问题很可能会延长跨浏览器的实现。但是,随着浏览器开始支持这个属性,我将用新的信息更新这个答案。