我遇到了一个我无法弄清楚的问题。出于某种原因,我的 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>
答案 0 :(得分: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>