如何解决如何防止 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>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
