Question

我想为折线图提供响应式SVG。这应该有三个区域，它们结合了固定和可扩展的元素。

粉红色元素应该是缩放子svg（我需要定义一个用于绘制折线的子坐标系），灰色位用于绘制轴，并且应该具有有限的缩放，因为文本应该以相对简单的方式呈现字体。

最后，我想在没有JavaScript的情况下这样做。

我遇到的一些问题可能对解决方案有所帮助：

如果我可以将<svg>元素作为粉红色区域给出以下x="20px" width="calc(100% - 20px)" height="calc(100% - 20px)"，这将在很大程度上解决我的问题，但这会触发解析错误。我还没有设法使用CSS来实现任何变化。

Answer 1

（如果有人可以用＆＃34; pure＆＃34; svg这样做，那么另一个答案是值得的。

我使用HTML布局和多个SVG攻击它。这是我正在使用的代码：

＆＃13;

<div style="width: 100%; height: 300px">
  <!-- The Y axis -->
  <svg style="width: 40px; height: calc(100% - 20px); float: left;">
    <g class="yaxis">
      <line x1="99%" x2="99%" y1="0%" y2="100%" stroke="black" vector-effect="non-scaling-stroke"></line>
      <g class="tick tick-yaxis">
        <text x="99%" y="100%" text-anchor="end">$0.0</text>
        <line x1="98%" x2="100%" y1="100%" y2="100%" stroke="black"></line>
      </g>
      <!-- ... -->
      </g>
    </g>
  </svg>
  <!-- The actual chart -->
  <svg viewBox="0 0 100 100" preserveAspectRatio="none" style="width: calc(100% - 40px); height: calc(100% - 20px); float: left;">
    <polyline points="0,50 45.46574414322495,0 65,100 75,100 89.52839708894965,0 91.10141646672459,100 98.21939424857649,0 100,100"
    vector-effect="non-scaling-stroke" stroke="red" fill="none"></polyline>
  </svg>
  <!-- x axis -->
  <svg style="clear: both; margin-left: 40px; width: calc(100% - 40px); height: 20px;">
    <g class="xaxis">
      <line x1="0%" x2="100%" y1="1%" y2="1%" stroke="black" vector-effect="non-scaling-stroke"></line>
      <g class="tick tick-xaxis">
        <text x="5%" y="100%" text-anchor="middle">28 Feb 2011</text>
        <line x1="5%" x2="5%" y1="94%" y2="96%" stroke="black"></line>
      </g>
  </svg>
</div>

＆＃13;

Answer 2

将 vector-effect="non-scaling-stroke" 添加到您的路径

div {
  width: 100%;
  height: 180px;
  background: #f5f5f5;
  background: none;
}

svg > path{
  stroke: teal;
  stroke-width: 3;
  fill: none;
}

#SVGgrid {opacity: 0.15;}

.SVGLines{filter: drop-shadow(0.9px 4px 0.6px rgba(0,0,0,0.15));}
.red {stroke: #fa7a17;}
.blue {stroke: #4185f5;}
.yellow {stroke: #fbbd04;}

<div>
 <svg viewBox="0 0 52 100" preserveAspectRatio="none" style="width: 100%; height: 100%;">
   <defs>
        <pattern id="SVGGT" patternUnits="userSpaceOnUse" width="1" height="4">
            <line x1="1" y1="0" x2="1" y2="10" vector-effect="non-scaling-stroke" stroke="black"/>
            <line x1="0" y1="4" x2="4" y2="4" vector-effect="non-scaling-stroke" stroke="black"/>
        </pattern>
    </defs>
   <rect id="SVGgrid" width="100%" height="100%" fill="url(#SVGGT)" />
   <path class="SVGLines red" vector-effect="non-scaling-stroke" d="
        M 0.1,59
        S 0.5,60 1,59
        S 1.5,59 2,57
        S 2.5,58 3,55
        S 3.5,56 4,54
        S 4.5,55 5,53
        S 5.5,53 6,52
        S 6.5,51 7,51
        S 7.5,50 8,49
        S 8.5,47 9,48
        S 9.5,46 10,46
        S 10.5,42 11,43
        S 11.5,43 12,42
        S 12.5,40 13,39
        S 13.5,36 14,36
        S 14.5,36 15,35
        S 15.5,33 16,33
        S 16.5,33 17,30
        S 17.5,25 18,27
        S 18.5,28 19,26
        S 19.5,26 20,24
        S 20.5,23 21,21
        S 21.5,22 22,20
        S 22.5,22 23,23
        S 23.5,25 24,26
        S 24.5,28 25,27
        S 25.5,27 26,28
        S 26.5,29 27,29
        S 27.5,34 28,31
        S 28.5,35 29,34
        S 29.5,37 30,35
        S 30.5,38 31,37
        S 31.5,41 32,38
        S 32.5,38 33,40
        S 33.5,41 34,41
        S 34.5,44 35,44
        S 35.5,50 36,47
        S 36.5,53 37,50
        S 37.5,53 38,53
        S 38.5,57 39,56
        S 39.5,56 40,55
        S 40.5,52 41,53
        S 41.5,54 42,51
        S 42.5,50 43,50
        S 43.5,47 44,47
        S 44.5,49 45,46
        S 45.5,46 46,45
        S 46.5,45 47,42
        S 47.5,41 48,41
        S 48.5,43 49,40
        S 49.5,36 50,38
        S 50.5,34 51,36
        S 51.5,34 52,33
     " stroke="black" fill="transparent" stroke-linecap="round"/>
     <path class="SVGLines blue" vector-effect="non-scaling-stroke" d="
        M 0.1,25
        S 0.5,26 1,25
        S 1.5,26 2,27
        S 2.5,31 3,30
        S 3.5,31 4,31
        S 4.5,32 5,34
        S 5.5,36 6,35
        S 6.5,38 7,36
        S 7.5,38 8,38
        S 8.5,41 9,41
        S 9.5,39 10,39
        S 10.5,34 11,36
        S 11.5,35 12,33
        S 12.5,33 13,32
        S 13.5,33 14,30
        S 14.5,29 15,28
        S 15.5,26 16,27
        S 16.5,25 17,26
        S 17.5,23 18,25
        S 18.5,25 19,22
        S 19.5,23 20,21
        S 20.5,20 21,19
        S 21.5,17 22,16
        S 22.5,17 23,14
        S 23.5,14 24,11
        S 24.5,14 25,13
        S 25.5,18 26,16
        S 26.5,18 27,19
        S 27.5,25 28,22
        S 28.5,17 29,19
        S 29.5,19 30,17
        S 30.5,14 31,16
        S 31.5,14 32,14
        S 32.5,13 33,13
        S 33.5,11 34,10
        S 34.5,13 35,11
        S 35.5,10 36,12
        S 36.5,15 37,14
        S 37.5,17 38,16
        S 38.5,14 39,13
        S 39.5,16 40,16
        S 40.5,19 41,18
        S 41.5,21 42,19
        S 42.5,19 43,20
        S 43.5,20 44,21
        S 44.5,24 45,23
        S 45.5,22 46,24
        S 46.5,28 47,27
        S 47.5,28 48,28
        S 48.5,29 49,29
        S 49.5,34 50,31
        S 50.5,36 51,33
        S 51.5,34 52,34
     " stroke="black" fill="transparent" stroke-linecap="round"/>
     <path class="SVGLines yellow" vector-effect="non-scaling-stroke" d="
        M 0.1,75
        S 0.5,78 1,75
        S 1.5,76 2,78
        S 2.5,84 3,81
        S 3.5,81 4,82
        S 4.5,86 5,85
        S 5.5,86 6,87
        S 6.5,89 7,90
        S 7.5,91 8,88
        S 8.5,85 9,86
        S 9.5,85 10,83
        S 10.5,79 11,81
        S 11.5,79 12,78
        S 12.5,78 13,75
        S 13.5,72 14,72
        S 14.5,68 15,70
        S 15.5,65 16,67
        S 16.5,65 17,66
        S 17.5,68 18,65
        S 18.5,66 19,63
        S 19.5,62 20,61
        S 20.5,60 21,60
        S 21.5,55 22,57
        S 22.5,59 23,56
        S 23.5,52 24,53
        S 24.5,57 25,54
        S 25.5,59 26,56
        S 26.5,60 27,59
        S 27.5,63 28,60
        S 28.5,62 29,62
        S 29.5,58 30,60
        S 30.5,57 31,57
        S 31.5,52 32,54
        S 32.5,55 33,52
        S 33.5,51 34,51
        S 34.5,50 35,48
        S 35.5,46 36,46
        S 36.5,47 37,44
        S 37.5,42 38,41
        S 38.5,41 39,39
        S 39.5,37 40,36
        S 40.5,37 41,34
        S 41.5,31 42,32
        S 42.5,31 43,30
        S 43.5,28 44,27
        S 44.5,25 45,26
        S 45.5,27 46,24
        S 46.5,23 47,21
        S 47.5,21 48,18
        S 48.5,20 49,17
        S 49.5,13 50,15
        S 50.5,16 51,14
        S 51.5,11 52,12
     " stroke="black" fill="transparent" stroke-linecap="round"/>
  </svg>
</div>

线图的SVG缩放

2 个答案: