折线SVG中的stroke-dasharray答案

【问题标题】：stroke-dasharray in polyline SVG折线SVG中的stroke-dasharray
【发布时间】：2018-05-12 16:31:39
【问题描述】：

我有一个折线属性

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

我遇到的问题是虚线没有出现。在折线的虚线笔划上找不到任何资源。我在这里或在我的资源搜索中缺少什么。请帮我解决这个问题。

帮助非常感谢

【问题讨论】：

您尚未设置笔划，例如中风=“红色”

标签： svg polyline

【解决方案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>

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

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>

【讨论】：