具有笛卡尔坐标系的简单可扩展SVG图

Question

我是SVG的新手,所以请耐心等待.我阅读了很多关于这个主题的文章,每个人都指向像d3.js这样的解决方案,在我看来,这对于我所拥有的简单任务来说是复杂的.

我需要用笛卡尔坐标系制作图形,其中(0,0)位于左下角.它需要具有以百分比表示的宽度,高度和数据,因此所有内容都与页面一致.

所以,这是我的代码(为了简单起见,只有部分图表在那里):

<style>
 .grid {stroke: white; stroke-width: 1; stroke-dasharray: 1 2}
 .label{font-family: courier new; fill: white; font-size: 14px}
 .data {stroke: white; stroke-width: 1}
</style>

<svg width="100%" height="100%">
 <g class="x grid">
  <line x1="0%"   x2="0%"   y1="80%" y2="100%"></line>
  <line x1="10%"  x2="10%"  y1="80%" y2="100%"></line>
  <line x1="20%"  x2="20%"  y1="80%" y2="100%"></line>
 </g>
 <g class="y grid">
  <line x1="0%" x2="20%" y1="80%"  y2="80%" ></line>
  <line x1="0%" x2="20%" y1="90%"  y2="90%" ></line>
  <line x1="0%" x2="20%" y1="100%" y2="100%"></line>
 </g>
 <g class="x label">
  <text x="10%"  y="100%"> 1 minute </text>
  <text x="20%"  y="100%"> 2 minutes</text>
 </g>
 <g class="y label">
  <text x="0%" y="80%"> 20% </text>
  <text x="0%" y="90%"> 10% </text>
 </g>
 <g class="data">
  <line x1="0%"  x2="10%"  y1="85%"  y2="92%"  ></line>
  <line x1="10%" x2="20%"  y1="92%"  y2="88%"  ></line>
 </g>
</svg>

我想使用polygon和path数据,所以我可以填充曲线下面的区域,但它不喜欢百分比作为值.有人建议使用viewbox将百分比转换为像素,然后使用像素,但这会弄乱我的网格.我还想在左下角有(0,0),这样我的CGI就不必对它需要显示的所有点进行数学运算.我试过transform="translate(0,100) scale(1,-1)"但是这不适用于百分比.我也试过transform="rotate(270)"但是当你减小窗口宽度时,图形高度会降低......

那么,有人可以在这里启动我,并帮助我设置一个流畅的,可调整大小的图形,其左下角的原点和曲线下方的彩色区域？

Answer 1

您需要使用viewBox,因为正如您所发现的那样,转换组件不会占用百分比.使用viewBox,您仍然可以使用百分比作为坐标.但是,您需要选择一个纵横比与最终图表类似的viewBox.否则,页面上的对象可能会被压扁或拉伸.

<svg width="100%" height="100%" viewBox="0 0 500 500">
  <g id="cartesian" transform="translate(0,500) scale(1,-1)">
    <g class="data">
      <line x1="0%"  y1="75%" x2="50%"  y2="40%" ></line>
      <line x1="50%" y1="40%" x2="100%" y2="60%"></line>
    </g>
  </g>
</svg>

不幸的是,翻转坐标系会产生副作用.如果翻转所有对象,包括文本,如果我们添加一些,您可以看到:

<svg width="100%" height="100%" viewBox="0 0 500 500">
  <g id="cartesian" transform="translate(0,500) scale(1,-1)">
    <g class="data">
      <line x1="0%"  y1="75%" x2="50%"  y2="40%" ></line>
      <line x1="50%" y1="40%" x2="100%" y2="60%"></line>
    </g>
    <g class="y label">
      <text x="0%" y="50%"> 10% </text>
      <text x="0%" y="90%"> 20% </text>
    </g>
  </g>
</svg>

在这里演示

所以你需要通过再次以正确的方式重新翻译文本来解决这个问题.

<svg width="100%" height="100%" viewBox="0 0 500 500">
  <g id="cartesian" transform="translate(0,500) scale(1,-1)">
    <g class="data">
      <line x1="0%"  y1="75%" x2="50%"  y2="40%" ></line>
      <line x1="50%" y1="40%" x2="100%" y2="60%"></line>
    </g>
    <g class="y label">
      <text x="0%" y="50%" font-size="16"
            transform="translate(0,500) scale(1,-1)"> 10% </text>
      <text x="0%" y="90%" font-size="16"
            transform="translate(0,900) scale(1,-1)"> 20% </text>
    </g>
  </g>
</svg>

不幸的是,正如你所看到的那样,这会让我们能够用百分比干线清洁地定位标签.如果我们想在<text>元素上使用百分比坐标,我们必须调整每个标签的变换.

这个问题的最佳解决方案可能是将所有标签放入<defs>并引用它们<use>.这样我们就能以正确的方式将它们翻转并用百分比坐标来定位它们.

<svg width="100%" height="100%" viewBox="0 0 500 500">
  <defs>
    <text id="label1" font-size="16" transform="scale(1,-1)"> 10% </text>
    <text id="label2" font-size="16" transform="scale(1,-1)"> 20% </text>
  </defs>
  <g id="cartesian" transform="translate(0,500) scale(1,-1)">
    <g class="data">
      <line x1="0%"  y1="75%" x2="50%"  y2="40%" ></line>
      <line x1="50%" y1="40%" x2="100%" y2="60%"></line>
    </g>
    <g class="y label">
        <use xlink:href="#label1" x="0%" y="50%"/>
        <use xlink:href="#label2" x="0%" y="90%"/>
    </g>
  </g>
</svg>

在这里演示