Question

我<svg>内有<div>，但中风给了我一些问题，我认为它被div的边界框剪掉了，不确定。

在Chrome和FireFox上，正在裁剪笔画。

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

理想情况下，我需要的是svg在其中画出它的笔画。但即使IE 11如何做，对我来说也是一个可以接受的解决方案。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

绘制的SVG笔划剪裁

1 个答案: