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

Question

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.

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/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>

Where do I add that? Not quite sure where I add the CSS since I'm a noobie with SVG.JS — Jadon Erwin, Feb 18 '21 at 16:00

whoacowboy · Accepted Answer · 2021-02-18T18:32:19.637

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/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>

Your example

<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>

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/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>

Your solution works! Thank you. I am going to wait and see if anyone has a solution without having to shift everything down and to the right a pixel because that might make things tricky for me in the future as I am going to be implementing a grid. — Jadon Erwin, Feb 18 '21 at 17:07
Sounds good. I updated my answer to give you an alternative approach based on @ritaj 's comment. Another idea would be to set the stroke to 0 and add a [style](https://svgjs.com/docs/3.0/shape-elements/#style) to the circle `box-shadow: inset 0px 0px 0px 1px red;` but I don't know if that would work. — whoacowboy, Feb 18 '21 at 18:34

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

1 Answers1

Your example

Alternative without transform per your comments