为什么这些行不在他们的svg元素中？

Question

我对svg相当新，并且可以使用一些帮助来弄清楚为什么我的线条没有按预期显示出来。我用红色表示我的第一行是哪里，蓝色表示svg元素的位置 - 模仿你在开发人员工具中鼠标悬停在元素上时所看到的内容。我希望该行在svg元素中的某个位置。相反，它显然不是也不可见。第二行是部分可见的，但不是我喜欢的地方（在下一行的另一个svg中，“payer duration”与另一行相似，很好地居中等等。）。

代码：

.durationLegend {
  height:45px;
  width:175px;
  border: #cccccc 1px solid;
  fill: none;
}

.durationLegend p {
  margin-top: 2px;
  margin-bottom: 2px;
}

.legendKey {
  height: 10px;
  width: 30px;
}

<div class="durationLegend">
        <p>
            <svg class="legendKey"><line y1="-0.3em" x1="-0.5em" y2="-0.3em" x2="0.75em" stroke-width="3" stroke-dasharray="none" stroke="Green"></line></svg>
            Duration (secs)
        </p>
        <p>
            <svg class="legendKey"><line y1="0.7em" x1="-0.5em" y2="0.7em" x2="0.75em" stroke-width="3" stroke-dasharray="3px, 3px" stroke="Green"></line></svg>
           Payer Duration (secs)
        </p>
    </div>

Answer 1

我认为这是因为你使用负x和y值。

<div class="durationLegend">
    <p>
        <svg class="legendKey"><line y1="0.3em" x1="0.5em" y2="0.3em" x2="0.75em" stroke-width="3" stroke-dasharray="none" stroke="Green"></line></svg>
        Duration (secs)
    </p>
    <p>
        <svg class="legendKey"><line y1="0.7em" x1="-0.5em" y2="0.7em" x2="0.75em" stroke-width="3" stroke-dasharray="3px, 3px" stroke="Green"></line></svg>
       Payer Duration (secs)
    </p>
</div>

这对我有用。

Answer 2

您应该为SVG定义viewbox，这将决定SVG的坐标空间

  

viewBox属性允许指定一组给定的图形拉伸以适合特定的容器元素。

     

viewBox属性的值是由空格和/或逗号分隔的四个数字min-x，min-y，width和height的列表，它们指定用户空间中应该映射到边界的矩形由给定元素建立的视口，考虑属性preserveAspectRatio。

如果您定义viewbox space之外的元素开始/结束点，则会将它们视为溢出SVG，但视图框将隐藏该部分，如overflow:hidden。

如果您没有定义viewbox，则该元素的大小与给定宽度相同。

基本上，你已经告诉过SVG＆＃39;子元素＆＃39;开始＆amp; /或在SVG＆＃34;窗口之外结束＆＃34;。

有用的文章＆amp;教程http://tutorials.jenkov.com/svg/index.html