如何防止 SVG JavaScript 图像被截断？

问题描述

我遇到了一个我无法弄清楚的问题。出于某种原因，我的 SVG 图像不断被切断。我一直在挖掘 SVG docs。

代码如下：

var draw = SVG().addTo('#drawing').size(300,300)
var Circle = draw.symbol();
Circle.circle(50).fill('none').stroke({
  color: 'black',width: 1
})
draw.use(Circle).move(50,200)
draw.use(Circle).move(100,200)

<html>

<head>
  <title>SVG.js</title>
  <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
</head>

<body>
  <div style="margin: 1%; border: 1px solid black; height: 500px;">
    <div id="drawing" style="margin: 1%; border: 1px solid red;height: 95%"></div>
  </div>

</body>

</html>

解决方法

所以看起来线条是使用外部或居中绘制的，因此边缘被切断。我所做的是 transform 圆在 x 和 y 轴上移动 1px。我查看了文档，没有看到改变线条样式的方法，这也可能会解决这个问题，但我什么也看不到。

    <html>
    <head>
      <title>SVG.js</title>
      <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
    </head>
    <body>
      <div>
        <div id="drawing"></div>
      </div>

    </body>
    <script>

    var draw = SVG().addTo('#drawing').size(52,52)
    var Circle = draw.symbol();
    Circle.circle(50).fill('none').stroke({ color: 'black',width: 1 }).transform({
  translateX: 1,translateY: 1
})
    draw.use(Circle).move(0,0)
    </script>
    </html>

你的例子

<html>
<head>
  <title>SVG.js</title>
  <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
</head>
<body>
  <div style="margin: 1%; border: 1px solid black; height: 500px;">
    <div id="drawing" style="margin: 1%; border: 1px solid red;height: 95%"></div>
  </div>

</body>
<script>

var draw = SVG().addTo('#drawing').size(300,300)
var Circle = draw.symbol();
Circle.circle(50)
.fill('none')
.stroke({ color: 'black',width: 1 }) 
.transform({translateX: 1,translateY: 1})
draw.use(Circle).move(50,200)
draw.use(Circle).move(102,200)
</script>
</html>

根据您的评论无需转换的替代方案

var draw = SVG().addTo('#drawing').size(300,width: 1 }) 
draw.use(Circle).move(50,200)

#drawing symbol {
  overflow: visible;
}

<html>
<head>
  <title>SVG.js</title>
  <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
</head>
<body>
  <div style="margin: 1%; border: 1px solid black; height: 500px;">
    <div id="drawing" style="margin: 1%; border: 1px solid red;height: 95%"></div>
  </div>

</body>
</html>

javascript svg.js