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

【问题标题】：How do I prevent SVG JavaScript images from getting cut off?如何防止 SVG JavaScript 图像被截断？
【发布时间】：2021-02-18 15:42:49
【问题描述】：

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

【问题讨论】：

overflow: visible
在哪里添加？不太清楚我在哪里添加 CSS，因为我是 SVG.JS 的菜鸟

标签： javascript svg.js

【解决方案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>

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

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>

【讨论】：

您的解决方案有效！谢谢你。我将等待，看看是否有人有解决方案，而不必将所有内容向下和向右移动一个像素，因为这可能会让我将来的事情变得棘手，因为我将要实现一个网格。
听起来不错。我根据@ritaj 的评论更新了我的答案，为您提供了一种替代方法。另一个想法是将笔画设置为 0 并将 style 添加到圆圈 box-shadow: inset 0px 0px 0px 1px red; 但我不知道这是否可行。