SVG笔画被剪裁[重复]答案

【问题标题】：SVG stroke drawn clipped [duplicate]SVG笔画被剪裁[重复]
【发布时间】：2016-10-23 09:02:47
【问题描述】：

我在<div> 中有<svg>，但笔划给我带来了问题，我认为它被div 的边界框剪掉了，我不确定。

在 Chrome 和 FireFox 上，笔划被剪裁。

令人惊讶的是，在 IE11 上它没有被剪裁，但这仍然不正确，它应该被绘制在 svg 内。因为如果我将两个 div 元素彼此靠近，我不想看到其中一个 svg 的笔划被绘制在另一个上。但是，如果没有其他办法，这对我来说仍然是一个可以接受的解决方案。

理想情况下，我需要的是 svg 在里面绘制它的笔划。但即使 IE 11 的表现如何，我现在也是可以接受的解决方案。

.container
{
  width: 300px;
  height: 300px;
}

<div class="container">
  <svg version="1.1" 
       baseProfile="full"
       xmlns="http://www.w3.org/2000/svg"
       width="100%" 
       height="100%"
       fill="yellow"
       stroke-width="10"
       stroke="green">
    <circle cx="50%" cy="50%" r="50%" />
  </svg>
</div>

我需要一个适用于任何 svg 的解决方案，circle 只是一个示例

【问题讨论】：

目前这是不可能的。实际上，笔画的一半在路径的一侧，另一半在内侧。没有stroke-position 属性。您只需要调整 SVG 的视图框。
相关 - stackoverflow.com/questions/7241393/…?
@Harry 真的有关系吗？我真的不想控制笔画，我想可能有一些与div 或svg 相关的东西，比如边距或填充或其他东西
如果问题真的是重复的，我可以删除或关闭这个问题吗？
@DonBox：我认为是（但不确定这就是为什么我只是发表评论而不是 vtc）。他们所说的“控制”是关于笔画的绘制位置。默认情况下，我认为它在 SVG 中是一半在里面，一半在外面。

标签： css svg

【解决方案1】：

笔划不计入总半径。 缩小半径：

.container
{
  width: 300px;
  height: 300px;
}

<div class="container">
  <svg version="1.1" 
       baseProfile="full"
       xmlns="http://www.w3.org/2000/svg"
       width="100%" 
       height="100%"
       fill="yellow"
       stroke-width="10"
       stroke="green">
    <circle cx="50%" cy="50%" r="45%" />
  </svg>
</div>

【讨论】：

我需要让它适用于任何 svg。这只是一个例子。对不起，如果我不清楚，我会更新问题