3

我如何删除此 svg 中的多余空格？当我检查蓝色曲线是路径，突出显示的蓝色是整个 svg。我不明白我尝试调整视图框和几个不同的属性它不起作用？

.grey-curve-svg 只是一个没有样式的空 div。

这是svg：

<div class="grey-curve-svg">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
    <path fill="#0099ff" 
          fill-opacity="1" 
          style="--darkreader-inline-fill:#007acc;"  
          data-darkreader-inline-fill="" 
          d="M0,320L120,298.7C240,277,480,235,720,234.7C960,235,1201,277,1320,298.7L1440,320L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z" 
          ></path>
  </svg>
</div>

svg

4

3 回答 3

2

确定 SVG 中的viewBox可见尺寸。

你的是0 0 1440 320（min-x，min-y，width和height）。您可以更改它以裁剪 svg 的内容。类似的东西viewBox="0 230 1440 100"看起来更合适

<div class="grey-curve-svg">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 230 1440 100">
    <path fill="#0099ff" 
          fill-opacity="1" 
          style="--darkreader-inline-fill:#007acc;"  
          data-darkreader-inline-fill="" 
          d="M0,320L120,298.7C240,277,480,235,720,234.7C960,235,1201,277,1320,298.7L1440,320L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z" 
          ></path>
  </svg>
</div>

于 2020-04-27T20:15:37.627 回答
2

viewBox区域顶部有很多空白区域。调整 viewBox 尺寸可以解决这个问题......

<div class="grey-curve-svg">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 230 1440 320">
    <path fill="#0099ff" 
          fill-opacity="1" 
          style="--darkreader-inline-fill:#007acc;"  
          data-darkreader-inline-fill="" 
          d="M0,320L120,298.7C240,277,480,235,720,234.7C960,235,1201,277,1320,298.7L1440,320L1440,320L1320,320C1200,320,960,320,720,320C480,320,240,320,120,320L0,320Z" 
          ></path>
  </svg>
</div>

于 2020-04-27T20:16:02.910 回答
0

以前的答案据说会改变 viewBox，但对我来说只是简单地viewbox="0 0 1 1"工作，因为我的子图形取代了这些尺寸。

于 2020-07-30T14:50:33.920 回答