你能控制SVG的笔画宽度是如何绘制的吗?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (22)

目前正在构建一个基于浏览器的SVG应用程序。在这个应用程序中,各种形状可以由用户设计和定位,包括矩形。

当我申请stroke-width到SVGrect说要素1px,则将笔画应用于rect的偏移量和嵌入方式不同的浏览器。事实证明这很麻烦,特别是当我试图计算矩形的外部宽度和视觉位置,并将其放置在其他元素旁边时。

例如:

  • 火狐增加了1px内嵌(底部和左边)和1px偏移量(上和右)。
  • Chrome增加了1px内嵌(上、左)和1 px偏移量(底部和右侧)。

到目前为止,我唯一的解决办法是自己画出实际的边界(可能是用path(工具)并将边框定位到被抚摸元素的后面。但是这个解决方案是一个令人不快的解决办法,如果可能的话,我宁愿不走这条路。

所以我的问题是,你能控制一个SVGstroke-width是以元素为基础的吗?

提问于
用户回答回答于

它从来没有像以前那样在规范中被详细说明过,递延-直到现在。

目前还没有浏览器支持这个属性,或者,据我所知,任何新的SVG 2特性,但希望它们在规范成熟后很快就会支持。这

关于属性应该如何在开放路径和循环上运行,似乎存在一些问题。这些问题很可能会延长跨浏览器的实现。

用户回答回答于

不能指定笔画是在元素内部还是外部绘制。

正如我在建议中指出的,

  • 通过将笔画宽度加倍,然后使用剪裁路径将对象剪裁到自身,您可以获得与“内部”相同的视觉效果。
  • 你可以实现与“外部”相同的视觉效果,方法是将笔画宽度加倍,然后将对象的非笔画副本覆盖在其自身之上。

扫码关注云+社区