13、SVG 属性 stroke

转载 作者：大佬之路 更新时间：2024-01-21 22:44:07 28 4

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none">
    <path stroke="red" d="M5 20 l215 0" />
    <path stroke="blue" d="M5 40 l215 0" />
    <path stroke="black" d="M5 60 l215 0" />
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black">
    <path stroke-width="2" d="M5 20 l215 0" />
    <path stroke-width="4" d="M5 40 l215 0" />
    <path stroke-width="6" d="M5 60 l215 0" />
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black" stroke-width="6">
    <path stroke-linecap="butt" d="M5 20 l215 0" />
    <path stroke-linecap="round" d="M5 40 l215 0" />
    <path stroke-linecap="square" d="M5 60 l215 0" />
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <g fill="none" stroke="black" stroke-width="4">
    <path stroke-dasharray="5,5" d="M5 20 l215 0" />
    <path stroke-dasharray="10,10" d="M5 40 l215 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
  </g>
</svg>

28 4 0

• javascript - 如何在 raphaeljs 中使用 attr 的 stroke-dasharray,stroke-linecap,stroke-linejoin

  谁能给我一个这些属性的例子:stroke-dasharray、stroke-linecap、stroke-linejoin 我试过使用它们，但我不太理解它们值的 sentext 结构。 最佳答案 Ph

• HTML5 Canvas : How can I check if a stroke is crossing an other stroke?

  如何检查笔划是否与其他笔划交叉？这可能吗？ 我尝试使用 ispointInPath() 和 ispointInStroke()，但它不起作用。 最佳答案 如果两个笔划都是线段，您可以使用 Paul B

• 安卓 : stroke in a shape create a margin of the stroke width

  我创建了一个矩形形状以将其用作列表项背景。我的问题是笔画不跟随 View 边框，而是留出 +/- 笔画宽度的边距。 这是我的形状的 xml: 这是我风格的 xml:

• javascript - <使用> - SVG : Stroke of Circle overriding stroke of use element

  两者的行程元素在这里被忽略。 的笔触颜色设置为蓝色，同时出现在 上元素也。为什么？ 我想要所有 3 个元素的不同条纹颜色。但它不起作用。       最佳答案 因为 c

• css - SVG，为什么可以:hover change the stroke-width but not the stroke-color?

  为什么在这个 SVG 中，我可以在悬停时更改描边宽度，但不能更改描边颜色？ 问题在下面的代码片段中清楚地呈现出来。 stroke-width:5;正在查看应用于 中的所有元素, 而 stroke:b

• gimp - 如何使用 Script-fu 在 "Stroke Path"- "Stroke Line"对话框中选择描边线

  在 Gimp 2.6 中有一个“编辑”->“描边路径”对话框。在此对话框中有一个“描边线”区域，其中包含线宽、端点样式、连接样式、斜接限制等选项。 我将如何使用 script-fu 中的“描边线”选项

• javascript - stroke-width 大于 1 时 IE 中的 SVG stroke 动画

  当笔画宽度大于 1 像素时，我在 IE 中动画笔画路径时遇到一个奇怪的问题。我正在使用以下脚本(不是我创建的): //inspired by http://product.voxmedia.com/p

• javascript - ng-style 不适用于 stroke-dasharray 和 stroke-dashoffset CSS 元素

  通过 ng-style 传递这些值，所以: ng-style="{'stroke-dasharray':data.value, 'stroke-dashoffset': data.value}" 打破

• 13、SVG 属性 stroke

  stroke 开头的属性可以定义线段的各种属性，包括线条的宽度、起末的形状、线条类型 SVG提供了一个范围广泛 stroke 属性，但我们主要讲解一下几种： stroke stroke-

• java - 如何检测鼠标点击四边形曲线的 "stroke"部分？

  我想检测 QuadCurve 上的鼠标点击事件，但只检测“笔划”部分。仅清除图像的绿色部分。 在这里，我使用红色填充值，但在我的应用程序中我使用透明填充值。因此检测曲线可见部分的点击是至关重要的。 示

• c# - 如何在不使用 stroke 属性的情况下绘制椭圆轮廓​​？

  我真正想要的是一种在 WPF 形状(例如椭圆)上设置负描边粗细值的方法，以便描边轮廓向外绘制到形状的左侧和顶部，而不是在形状内部，覆盖我的书写当我使笔划的想法太粗时的文字...我希望椭圆的半径保持不变

• android - 仅在实体右侧使用 Stroke 可绘制

  如何在不使用插图的情况下仅在可绘制对象的右侧使用笔划？

• java - 如何在考虑 Stroke 的情况下计算路径边界框

  我目前正在使用下面的代码绘制一条线，并希望在我的路径周围设置边界框，但是如果我调用 path.getBounds()，我会得到一个忽略笔划宽度的边界框和线连接因此我的绘图最终在放置在 JViewpor

• javascript - rect with stroke，笔划线在缩放时会被错误转换

  我从这个网站和这里的贡献者那里得到了很多帮助，谢谢。现在我有一个关于 Fabric.js 中带有笔划的矩形的问题，因为我将它用作图像和文本的占位符，当我缩放它时，边框线宽度也被缩放，我认为这是我想要的

• SVG - 带有百分比单位的 stroke-dasharray 不能按预期工作

  我想我不太明白这里的某些东西。stroke-dasharray 中的百分比单位与什么有关？我在考虑相对于 SVG View 框的问题，但我可能错了。 我的问题:我有一个 SVG，宽度为 320px，高

• css - SVG stroke-dashoffset 动画打破封闭路径

  我正在用 SVG 制作一个简单的动画 stroke-dashoffset以及一系列路径。 问题是:在没有动画的情况下，内联 SVG 有两个具有非常锐 Angular 的三 Angular 形，并且它们

• javascript - 用 stroke-dasharray 和事件颜色填充划分半圆

  我正在研究 SVG 仪表，我想在范围 slider 移动到带有渐变颜色的事件笔触填充时将半圆分成几部分。并且想在计针移动时再增加一条黑色运行轨迹。我曾尝试使用 stroke-dasharray 但添加

• svg - stroke-dashoffset，位置stroke-dasharray

  我有 3 个 svg donut chart 表，每个图表都有一条用 stroke-dasharray 创建的线，所有图表加起来为 100%。 我希望每个图表都从最后一个图表结束的地方开始，所以第一个

• svg - stroke-dashoffset，位置stroke-dasharray

  我有 3 个 svg donut chart 表，每个图表都有一条用 stroke-dasharray 创建的线，所有图表加起来为 100%。 我希望每个图表都从最后一个图表结束的地方开始，所以第一个

• javascript - 谷歌图表 : Adding stroke to points

  我想在我的 Google 折线图中的点周围添加一笔画。 来自points-documentation Google Charts(底部)我们有: The following style customi