CODEWITHSUNDEEP
javascriptsvg.js
Jadon Erwin
Jadon Erwin

Reputation: 661

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

I have run into a problem that I can't figure out. For some reason, my SVG images keep getting cut off. I have been digging through the SVG docs.

enter image description here

Here is the code:

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/[email protected]/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>

Upvotes: 2

Views: 187

Answers (1)

whoacowboy
whoacowboy

Reputation: 7447

So it looks like the line is being drawn either using outside or centered so the edge is being cut off. What I did was transform the circle to move it by 1px on the x and y axis. I looked through the docs and didn't see a way to change the line style which would also probably fix this, but I couldn't see anything.

    <html>
    <head>
      <title>SVG.js</title>
      <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/[email protected]/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>

Your example

<html>
<head>
  <title>SVG.js</title>
  <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/[email protected]/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>

Alternative without transform per your comments

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/[email protected]/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>

Upvotes: 1

Related Questions