Not a huge deal, but I've noticed that in this conveyor system I'm designing, I'm making svg conveyor section templates, and then putting them together with flex repeaters and embedded views. I've noticed that there will be a faint border on each instance, especially if it's zoomed out:
So in this example, the M1/M2 pairs are a template.
But if I were to open the template itself, there are no border lines:
There are actually two SVGs here, and the root container is a flex container. Each svg is set to grow 1 shrink 1 and a basis of auto.
I also notice the flex repeater will sometimes make it "jagged" looking:
I have tried setting the border with to 0, border style none. I've set stroke to 0px. Nothing makes a difference. The svgs don't have any stroke properties that would override anything either. Anybody with some CSS/SVG wizardry skills know what's going on here?
I suspect the SVG in your template is floating to the middle and it's sizing the content to have a small gap on front and back as it preserves the aspect ratio.
You can try setting your SVG's "preserveAspectRatio" property to none and see what happens. Sometimes that will work and sometimes it won't.
You could also try setting a negative margin on the element style to slide the content over and cover the gap but that's possibly a bad way to solve it. I'd have to think about it and you'd want to test that with various sized windows to make sure it doesn't cause unexpected problems.
Another approach to consider...
If all you're doing is lines I would use a label or container instead of an SVG because it gives you a lot more control of the layout relative to other elements. SVGs are really good for keeping things within a viewbox displaying well relative to other things in the viewbox. They are not so good for aligning things relative to other instances of the SVG. Labels and containers with CSS styles do this very well.
If you need to layer elements you can always put them in a coordinate container OR set them to absolute positioning within a flex layout. Depending on what you're trying to do you can sometimes handle it with pseudoelements on the advanced sytle sheet as well.
preserveAspectRatio was already set to none on all of them. I am admittedly stretching them out and manipulating them quite a bit, so I already had it set that way.
Labels aren't a bad idea, but we also have various curved conveyor sections that require an svg and I want them to match the straight sections. Unless there's a "curved label" feature I'm unaware of.
It depends on what you mean by curved. You can do a 90 using border radius 50% on a corner but that is fairly limited.
Interesting.
We have 90 degree, 45 degree, and 30 degree sections though
I'd be inspecting the Dom to see what's going on. You can open the dev tools in the designer itself under tools, perspective, external debugger (or there abouts - not in front of pc atm)
I have it open, but I have no idea what I'm looking for. I don't know what "the Dom" means.
Here's what I'm seeing in dev tools:
Here's an example. The red section on the left is about a pixel shorter than the one on the right, yet, here's the element for the one on the left:
Here's the one on the right:
The ONLY difference between the two is the style classes.
This visual glitch doesn't show up at every zoom level:
It only seems to be bad when they're shrunken down considerably.
It's consistent across some browsers. Here it is in Edge (original was Chrome):
Here is the same area in Firefox:
The inconsistent widths are gone.
It seems like Firefox renders the page the best, but it also tells me this might be a browser issue, not an issue with anything on my end.
