SVG描边被剪裁绘制

Question

我有一个<div>里面有一个<svg>，但描边有问题，它似乎被div的边界框裁剪了，不确定。

在Chrome和FireFox上，描边被裁剪了。

令人惊讶的是，在IE11上它没有被裁剪，但这仍然不正确，它应该被绘制在svg内部。因为如果我把两个div元素放在一起，我不希望看到一个svg的描边被画在另一个div上。但是，如果没有其他办法，这对我来说仍然是可接受的解决方案。

理想情况下，我需要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 只是一个例子。

- Don Box

---

目前不可能实现。笔画实际上是一半画在路径的外侧，另一半画在内部。没有"stroke-position"属性。您需要调整SVG的视口。 - Paulie_D

相关 - https://dev59.com/EWw05IYBdhLWcg3wcRYj? - Harry

@Harry 这真的有关联吗？我并不是真的想控制笔画，我在想可能与 div 或 svg 相关，比如边距或填充之类的东西。 - Don Box

@DonBox：你在那个帖子里检查了Phrogz答案中的两个要点吗？那将是解决方案/变通方法。我不确定它是否重复，所以我会让社区来决定。既然你编辑了问题，它无论如何都会进入审查队列。 - Harry

由于某些原因，无法发送另一个答案，但我认为您只是在SVG本身上寻找overflow: visible;样式。您将看到描边未被剪切。我不认为您想要Photoshop中具有内部/外部/中心边框的内容，那只是一种解决方法，将描边绘制在圆形内部。大多数用户代理都会显示隐藏溢出的svg。 - Firsh - justifiedgrid.com

Answer 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>

- Uriel

---

我需要让它适用于任何SVG。这只是一个例子。如果我表达不清楚，很抱歉，我会更新问题。 - Don Box