容器截断 SVG 路径答案

【问题标题】：SVG path cut-off by the container容器截断 SVG 路径
【发布时间】：2017-01-11 14:47:05
【问题描述】：

This 是我的 SVG 路径

我的CSS代码如下；

svg {
    width: 200px;
   height: 200px;
    background-color: #2a0800;
}

svg path{
    stroke-width: 20;
    stroke-opacity: 1;
    stroke: #ff682b;
}

SVG 路径被正方形的边界切割。如何动态增加这个容器/黑色背景的大小，这样当我增加笔画宽度时，我就不会被截断。

【问题讨论】：

调整viewbox：developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
@Paul 我没有在<svg> 标记之间定义 svg 元素，而是从属于库的函数返回了 svg 对象。那么，此时，我该如何使用viewbox呢？
使用SVG view 来应用viewBox。

标签： javascript css svg

【解决方案1】：

将填充放入 svg 解决了我的问题；

svg {
    padding-left: 1px;
    padding-right: 1px;
    padding-top: 1px;
    padding-bottom: 1px;
}

【讨论】：

【解决方案2】：

这是 svg 的 viewBox。有时填充不相应地工作

【讨论】：

CSS Tricks 分解了您的选择以及最有效的方法。 css-tricks.com/tight-fitting-svg-shapes