折线 SVG 中的 stroke-dasharray

Question

我有折线属性

 <polyline points="229.7610294117647,200.44669117647058 
 293.93566176470586,148.9485294117647 325.6268382352941,95.8658088235294 
 374.74816176470586,124.38786764705881 389.00919117647055,218.6691176470588 
 346.22610294117646,305.02757352941177 263.8290441176471,311.3658088235294 
 232.1378676470588,215.5 " id="myCanvas_bg_obj_kpts0_43390" fill="none" 
 stroke-dasharray="5, 5" stroke-width="2" fill-opacity="0.5"></polyline>

我遇到的问题是没有显示虚线。无法找到有关多段线虚线笔划的任何资源。我在这里或在我的资源搜索中缺少什么。请帮我解决这个问题。

非常感谢帮助

Answer 1

根据建议添加 Robert Longson stroke="red"

文件在矢量编辑器中打开 Inkscape

图片显示svg图形出现在可视区，需要向左上移动。

这可以通过两种方式完成：

添加 viewport、viewBox

并使用变换命令移动图像

transform="translate(-130 -50)"

<svg width="400" height="400" viewBox="0 0 400 400" >
 <g transform="translate(-130 -50)">
 <polyline points="229.7610294117647,200.44669117647058 
 293.93566176470586,148.9485294117647 325.6268382352941,95.8658088235294 
 374.74816176470586,124.38786764705881 389.00919117647055,218.6691176470588 
 346.22610294117646,305.02757352941177 263.8290441176471,311.3658088235294 
 232.1378676470588,215.5 " id="myCanvas_bg_obj_kpts0_43390" fill="none" 
 stroke-dasharray="5, 5" stroke-width="2" fill-opacity="0.5" stroke="red"></polyline> 
 </g>
 </svg>

而不是 translate 转换命令，使用属性 x-min=130、y-min=50

viewBox="130 50 400 400"

<svg width="400" height="400" viewBox="130 50 400 400" >
 
 <polyline points="229.7610294117647,200.44669117647058 
 293.93566176470586,148.9485294117647 325.6268382352941,95.8658088235294 
 374.74816176470586,124.38786764705881 389.00919117647055,218.6691176470588 
 346.22610294117646,305.02757352941177 263.8290441176471,311.3658088235294 
 232.1378676470588,215.5 " id="myCanvas_bg_obj_kpts0_43390" fill="none" 
 stroke-dasharray="5, 5" stroke-width="2" fill-opacity="0.5" stroke="red"></polyline> 
 
 </svg>

折线 SVG 中的 stroke-dasharray

stroke-dasharray in polyline SVG

svg

polyline