你能控制如何绘制 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 工作组 应该可以实现这些结果，通过将 veStrokePath 与 veIntersect(用于内部")或与 veExclude(用于外部")组合起来.然而，Vector Effects 仍然是一个工作草案模块，我还没有找到任何实现.

编辑 2:SVG 2 草案规范包括一个stroke-alignment 属性(中心|内部|外部可能的值).这个属性最终可能会变成 UA.

编辑 3:有趣而令人失望的是，SVG 工作组已从 SVG 2 中删除了stroke-alignment.您可以看到散文后面描述的一些问题此处.

Currently building a browser-based SVG application. Within this app, various shapes can be styled and positioned by the user, including rectangles.

When I apply a stroke-width to an SVG rect element of say 1px, the stroke is applied to the rect’s offset and inset in different ways by different browsers. This is proving to be troublesome, especially when I try to calculate the outer width and visual position of a rectangle and position it next to other elements.

For example:

• Firefox adds 1px inset (bottom and left), and 1px offset (top and right)
• Chrome adds 1px inset (top and left), and 1px offset (bottom and right)

My only solution so far would be to draw the actual borders myself (probably with the path tool) and position the borders behind the stroked element. But this solution is an unpleasant workaround, and I’d prefer not to go down this road if possible.

So my question is, can you control how an SVG’s stroke-width is drawn on elements?

解决方案

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屋！