Forum Discussion
Storyline 360 picture border showing incorrect
kellyr: Here are some potential non-JavaScript workarounds:
Use image-editing software to add a border to the actual image. Then insert the image into Storyline.
or
Create a black shape. Add the picture directly into its Normal state. Adjust the picture's alignment and size as needed.
- I suggest this for adding the pic: Start with the pic in Storyline. In the Accessibility window, hide the pic so it won't be in the Focus Order. Copy the pic. Go into Edit States mode for the shape. Paste the pic, and adjust its alignment and size as desired.
or
Create a shape with a border, and use the picture as the "fill."
SVG borders in Storyline can be tricky because SVG doesn’t have a true CSS-style border. What looks like a “border” is actually a <path> with a stroke drawn around the image.
Since strokes are centered on the path, part of the border can fall outside the visible area and get clipped, especially when scaling or transforms are applied. That’s why edges can appear uneven or cut off.
To keep all borders visually consistent in thickness, a simple workaround is to change the drawing order with JavaScript so the path is rendered on top of the image.
I don't think it is really a Storyline bug. Storyline just outputs an SVG where the “border” is a stroked <path>, and then the browser handles the rendering. But Storyline just makes it more noticeable because it positions and scales elements dynamically and it places the stroke behind the image by default.
SLIDE VIEW
Just to clarify, the JavaScript solution above is equivalent to placing a rectangle of the same size and position behind the image, with a 2 px outline and no fill. You can then group it, or simply leave it as is.