周围的 SVG 空间答案

【问题标题】：SVG space around周围的 SVG 空间
【发布时间】：2018-11-28 22:56:55
【问题描述】：

我有一个 svg 图标，它是由项目中使用的一些插件生成的。我需要修改 svg，因为它周围有一些空白区域。如何解决这个问题？是什么导致了这个空白？

[https://codepen.io/zoom/pen/NEObQB][2]

【问题讨论】：

请将您的代码添加到问题中
寻求代码帮助的问题必须包括在问题本身中重现它所需的最短代码，最好是在堆栈片段中。尽管您提供了一个链接，但如果它变得无效，那么您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。见Something in my website/demo doesn't work can I just paste a link。
我不太确定我是否理解您的问题。请为您的 SVG 元素尝试 viewBox="53 22 26 36"。使用的值取自您的三角形边界框
这个问题你解决了吗？

标签： html css svg

【解决方案1】：

将width 和height 也设置为svg 改为：

 x="8" y="22" viewBox="0 0 125 80"  style="fill: rgb(255, 255, 255);  stroke-width: 0px;"

<div>
  <svg id="svg"  width="125" height="60"><rect fill-rule="evenodd" clip-rule="evenodd" fill="none" width="125" height="60"></rect><polygon fill-rule="evenodd" clip-rule="evenodd" fill="red" points="53,22 53,58 79,40"></polygon></svg>
</div>

【讨论】：

【解决方案2】：

如果您希望您的 SVG 根据其父 div 上设置的高度和宽度进行缩放，请按如下方式设置：

div {
  position: relative;
  background-color: #eee;
}

svg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.div1 {
  width: 60px;
  height: 30px;
}

.div2 {
  width: 400px;
  height: 300px;
}

<div class="div1">
  <svg id="svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 125 80" style="fill: rgb(255, 255, 255);  stroke-width: 0px;"><rect fill-rule="evenodd" clip-rule="evenodd" fill="none" width="125" height="80"></rect><polygon fill-rule="evenodd" clip-rule="evenodd" fill="red" points="53,22 53,58 79,40"></polygon></svg>
</div>

<div class="div2">
  <svg id="svg" preserveAspectRatio="xMidYMid meet" viewBox="0 0 125 80" style="fill: rgb(255, 255, 255);  stroke-width: 0px;"><rect fill-rule="evenodd" clip-rule="evenodd" fill="none" width="125" height="80"></rect><polygon fill-rule="evenodd" clip-rule="evenodd" fill="red" points="53,22 53,58 79,40"></polygon></svg>
</div>

【讨论】：