您可以控制SVG的笔划宽度的绘制方式吗? [英] Can you control how an SVG's stroke-width is drawn?

问题描述

当前正在构建基于浏览器的SVG应用程序.在此应用中，用户可以设置各种样式和位置，包括矩形.

当我将stroke-width应用于例如1px的SVG rect元素时，笔触将由不同的浏览器以不同的方式应用于rect的偏移量和插图.事实证明这很麻烦，特别是当我尝试计算矩形的外部宽度和可视位置并将其放置在其他元素旁边时.

例如:

• Firefox会添加1px的插图(底部和左侧)和1px的偏移量(顶部和右侧)
• Chrome会添加1px的内嵌图片(顶部和左侧)和1px的偏移量(底部和右侧)

到目前为止，我唯一的解决方案是自己绘制实际边界(可能使用path工具)并将边界放置在描边元素的后面.但是，此解决方案是一种不受欢迎的解决方法，如果可能的话，我宁愿不走这条路.

所以我的问题是，您可以控制在元素上绘制SVG stroke-width的方式吗?

解决方案

否，您不能指定笔划是在元素内部还是外部绘制.我为此向SVG工作组提出了提案.功能于2003年推出，但没有得到支持(或讨论).

我在提案中指出，

• 通过将笔划宽度加倍，然后使用剪切路径将对象自身剪切，可以达到与内部"相同的视觉效果，并且
• 通过将笔划宽度加倍，然后将对象的无笔触副本覆盖在其自身上，可以实现与外部"相同的视觉效果.

编辑:将来，此答案可能是错误的.使用 SVG矢量效果，应该有可能获得这些结果通过将veStrokePath与veIntersect(对于内部")或与veExclude(对于外部")组合.但是，Vector Effects仍然是一个有效的草案模块，尚无我能找到的实现.

编辑2 :SVG 2规范草案包括 stroke-alignment 属性(可能的中心|内部|外部值).此属性可能最终使其成为UA.

编辑3 :有趣且令人失望的是，SVG工作组已从SVG 2中删除了stroke-alignment.您可以看到散文 解决方案

No, you cannot specify whether the stroke is drawn inside or outside an element. I made a proposal to the SVG working group for this functionality in 2003, but it received no support (or discussion).

As I noted in the proposal,

• you can achieve the same visual result as "inside" by doubling your stroke width and then using a clipping path to clip the object to itself, and
• you can achieve the same visual result as 'outside' by doubling the stroke width and then overlaying a no-stroke copy of the object on top of itself.

Edit: This answer may be wrong in the future. It should be possible to achieve these results using SVG Vector Effects, by combining veStrokePath with veIntersect (for 'inside') or with veExclude (for 'outside). However, Vector Effects are still a working draft module with no implementations that I can yet find.

Edit 2: The SVG 2 draft specification includes a stroke-alignment property (with center|inside|outside possible values). This property may make it into UAs eventually.

Edit 3: Amusingly and dissapointingly, the SVG working group has removed stroke-alignment from SVG 2. You can see some of the concerns described after the prose here.

这篇关于您可以控制SVG的笔划宽度的绘制方式吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！