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>

Demo here

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

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

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

1 个答案: