当前位置: 首页 > 知识库问答 >
问题:

SVG中的零笔画宽度

欧照
2023-03-14

使用后记多年,我现在正在学习SVG。PS有一个功能是我迄今为止无法复制的:零宽度线。在 PS 中,宽度为零的行始终可见:PostScript 将零行宽转换为最小的可打印宽度。在屏幕上,当缩放时,它们永远不会有任何思考,但无论比例如何,它们都可见。当我想渲染非常细的线条时,我已经使用了它们,而不会担心我将要使用的最终分辨率,事实证明它们非常有用。

然而,在官方SVG文档(https://www.w3.org/TR/svg-strokes/)中,它说:

零值导致不绘制笔划。负值无效。

SVG中有没有办法建立PostScript意义上的零宽度线?

共有1个答案

萧建木
2023-03-14

正如Robert所说,SVG中最接近您想要的东西是< code > vector-effect = " non-scaling-stroke " 。无论SVG如何缩放,这都会将笔画宽度固定为1。

这适用于Chrome和Firefox(可能还有Opera-尚未检查),但AFAIK不是IE/Edge。

<svg viewBox="0 0 100 100">
  <rect x="10" y="10" width="80" height="80"
        fill="none" stroke="black" stroke-width="1"
        vector-effect="non-scaling-stroke"/>
</svg>
 类似资料:
  • 我试图创建一个svg点,我可以扩大使用笔画宽度。

  • 笔:https://codepen.io/anon/pen/zezppk(在Chrome中可视化) 想法:动画一个SVG笔画,使它以长度0(一个等于路径总长度的dashOffset)开头,所以没有呈现任何内容。然后,逐步减小Dashoff集,直到显示出整个SVG笔画。到目前为止,没有问题,这是一个相当普遍的效果,事实上。但我想额外加点:笔画的“起点”也必须逐渐抵消,才能达到笔下的效果。 具体要求是

  • 目前为止,我们学到的正则表达式匹配,都是有“宽度”的,使用\w+。 匹配下面文本,会将。 一同匹配: regular。 expression。 如果不想匹配符号,只匹配一个位置,就要用到“零宽断言”(匹配宽度为零,满足一定的条件/断言),零宽断言使用 (?=表达式) 的语法,例如\w+(?=。),其中 (?=。) 表示 。 前面的位置(先行断言) regular。 expression。

  • 关于画笔 画笔可使路径的外观具有不同的风格。您可以将画笔描边应用于现有的路径,也可以使用 “画笔 ”工具,在绘制路径的同时应用画笔描边。 Illustrator 中有 4 种画笔 -书法画笔、散布画笔、艺术画笔和图案画笔。使用这些画笔可以达到下列效果:书法画笔创建的描边类似于使用书法钢笔带拐角的尖绘制的描边以及沿路径中心绘制的描边。在使用 “斑点画笔 ”工具时,可以使用书法画笔进行上色并自动扩展画

  • 问题内容: 是否可以固定HTML5 元素的宽度和高度? 通常的方法如下: 问题答案: 的DOM元素具有和对应的属性的和属性。在JavaScript代码中将它们设置为数值,以调整画布的大小。例如: 请注意,这将清除画布,但是您应该遵循此操作来处理那些不能完全清除画布的浏览器。尺寸更改后,您需要重绘要显示的所有内容。 进一步注意的是,高度和宽度是用于绘制逻辑帆布尺寸和是 不同的 距离和CSS属性。如果

  • 到目前为止,我在codepen https://codepen.io/phfilly/pen/gxbmmo?editors=1100上有这个信息 从我的发现和研究来看,这似乎只能通过使用剪辑路径来实现,或者有更简单的方法吗?如果是这样的话,我不确定使用什么属性作为clipPath。 任何帮助或指导将非常感谢。