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

Question

我运行遇到了一个我无法解决的问题。出于某种原因，我的 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>

Answer 1

所以看起来这条线是使用外部或居中绘制的，所以边缘被切断了。我所做的是 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, 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(102, 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>

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

How do I prevent SVG JavaScript images from getting cut off?

javascript

svg.js

你的例子

根据您的评论，没有转换的替代方案