主页 / 问题 / 786054
Accepted
user3178479
Asked:2020-02-16 20:40:25 +0000 UTC2020-02-16 20:40:25 +0000 UTC

使路径响应

  • 772

背景代码中有一个svg，它按预期延伸到整个页面，但path由于某种原因它没有填满其中的整个屏幕：

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.bg {
  width: 100%;
  height: 100%;
}

.bg svg {
  width: 100%;
  height: 100%;
}
<div class="bg">
  <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 500 330">
  <path class="x-1" opacity="0.2" fill="#4C72A0" d="M0,0c300-1.128,155.667,307.332,500,330H0V0z"/>
  </svg>
</div>

如何使屏幕的整个宽度和高度在path里面？svg

html

1 个回答

  1. Best Answer

    要了解 svg 边框的位置，请在 svg 文件的标题中添加边框

    style="border:1px solid red;" 调整比例和大小后，这个红色边框就不需要了，抹掉。

    为了让svg占据容器的整个空间，我们在svg文件里面添加width="100%"，height="100%"命令preserveAspectRatio="none" 

    <style>
html,
body {
  width: 100%;
  height: 100%;
 
}
</style>
<div class="bg">
  <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 500 330" preserveAspectRatio="none" style="border:1px solid red;" >
  <path class="x-1" opacity="0.2" fill="#4C72A0" d="M0,0c300-1.128,155.667,307.332,500,330H0V0z"/>
  </svg>
</div>

    • 7

相关问题