文章/答案/技术大牛

发布

社区首页 >问答首页 >嵌套svg的视图不能正常工作

问嵌套svg的视图不能正常工作
EN

Stack Overflow用户

提问于 2022-05-09 07:43:28

回答 1查看 62关注 0票数 0

我想定位嵌套的SVG没有边距。在这种情况下，我可以发现有太多的边缘，如果我降低高度，形状消失。我该如何解决这个问题？

<svg width="300" height="100" viewBox="0 0 300 100">
        <svg>
          <line x1="10" x2="275" y1="100" y2="100" fill="grey"/>
        </svg>
        <svg>
          <line
            x1="10"
            x2="275"
            y1="100"
            y2="100"
            fill="green"
          />
        </svg>
      </svg>

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-05-09 17:35:46

由于<line>的x/y属性，您的x/y元素被放置了一些边距/填充：

      <line x1="10" x2="275" y1="100" y2="100" fill="grey"/>

翻译为：

在x=10 svg单元处启动这条线；
将这条线绘制为x(2)=275。

因此，您将得到一个左边距为10个单位，右边距为25个单位。

此外，<fill>属性不会对<line>元素产生影响。

通过stroke属性设置笔画颜色。

如果需要将嵌套的svg扩展到父svg的宽度，则还需要设置

preserveAspectRatio="none"和width:100%

.svg-parent {
  border: 1px dotted red;
}

.svg-parent-responsive {
  width: 100%;
}

.line {
  stroke-width: 5;
  stroke: #000;
  vector-effect: non-scaling-stroke;
}

.line-green {
  stroke: green;
}

.line-gray {
  stroke: gray;
}

.resize {
  resize: both;
  overflow: auto;
  border: 1px solid #ccc;
  padding: 1em;
}

<div class="resize">

  <svg class="svg-parent" width="300px" height="100px" viewBox="0 0 300 100">
    <svg>
      <line class="line line-gray" x1="0" x2="100%" y1="50" y2="50"  />
    </svg>
  <svg>
      <line class="line line-green" x1="0" x2="100%" y1="75" y2="75" />
    </svg>
  </svg>

  <svg class="svg-parent svg-parent-responsive" preserveAspectRatio="none" height="100" viewBox="0 0 300 100">
    <svg>
      <line class="line line-gray" x1="0" x2="100%" y1="50" y2="50"  />
    </svg>
  <svg>
      <line class="line line-green" x1="0" x2="100%" y1="75" y2="75" />
    </svg>
  </svg>

</div>
<p>Resize me</p>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/72168527

复制

相似问题

问嵌套svg的视图不能正常工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问嵌套svg的视图不能正常工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问嵌套svg的视图不能正常工作
EN