简单的可缩放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>

不幸的是，翻转坐标系统有副作用。If会翻转包括文本在内的所有对象，你可以看到如果我们添加一些:

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

Demo