0

Most learned friends

I have an SVG cube icon. I made a sprite out of it, but there are gaps between the edges of the cube that take on the background color of the div in which the cube is located. How can I remove the gaps between the edges of the cube without increasing the size of the edges themselves? I develop in React.

I was only able to get to the point where, by varying the stroke-width values in the sprite, I was able to close these gaps. But this is not what I need, because in this case, the edges of the cube become wider than in the original model. Perhaps it would be appropriate to enlarge the planes of the cube itself, but I haven't found a way to do this. This is what my sprite looks like now.

<svg  xmlns="http://www.w3.org/2000/svg" style='display: none' >
    <defs>
    <symbol id="parcel-filled" viewBox="0 0 32 32">
        <path d="M18.166 3.144l6.667 3.079c0.883 0.408 1.621 1.045 2.163 1.827l-10.996 5.498-10.996-     5.498c0.541-0.782 1.28-1.42 2.163-1.827l6.667-3.079c1.379-0.637 2.953-0.637 4.332 0z"  stroke="white" stroke-width="2.2"/>
        <path d="M4.177 9.873c-0.116 0.455-0.177 0.93-0.177 1.415v9.424c0 2.19 1.241 4.175 3.167 5.065l6.667 3.079c0.377 0.174 0.768 0.301 1.166 0.379v-13.95l-10.823-5.412z"  stroke="white" stroke-width="2.2"/>
        <path d="M17 29.235c0.398-0.079 0.789-0.205 1.166-0.379l6.667-3.079c1.926-0.89 3.167-2.874 3.167-5.065v-9.424c0-0.485-0.061-0.96-0.177-1.415l-10.823 5.412v13.95z"  stroke="white" stroke-width="2.2"/>
    </symbol>
    </defs>
    </svg>
Improve this question
8
  • 1
    Try using a different viewBox. Given the thick white stroke you may try viewBox="2.5 2 27 29"
    – enxaneta
    Commented Jul 5 at 17:54
  • Thanks for your reply. Unfortunately, your hint didn't solve the problem. I tried to substitute different values in the viewBox, but during these experiments, the cube simply moved across the screen, either increasing or decreasing in its overall size. However, the gaps between the planes of this SVG cube did not decrease. For the experiments mentioned above, I removed the stroke-width and conducted experiments both with and without stroke-width.
    – Evhen Bezliudnui
    Commented Jul 6 at 12:33
  • For the shapes without the stroke you can: 1. wrap the paths in a group and get the bounding box of the wrapper with getBBox(). 2. Use the values from the bounding box to build the viewBox.
    – enxaneta
    Commented Jul 6 at 12:46
  • Sounds more like an CSS issue. Can you reproduce the issue by adding HTML, CSS and SVG to a code snippet (click the <> button in the editor)?
    – chrwahl
    Commented Jul 7 at 13:58
  • import React from 'react'; import css from './css/goods.module.css'; import sprite from '../../img/svg/sprite-icon.svg'; const Goods = () => { return ( <div className={css.divGoods__divParcelFilled}> <svg width="80" height="80" className={css.divGoods__divParcelFilled__style}> <use href={${sprite}#parcel-filled} /> </svg> </div> ) It doesn't skip the number of characters to display the sprite and module.css. If it works, I’ll immediately write the sprite and module.css code in the next comment.
    – Evhen Bezliudnui
    Commented Jul 7 at 22:34
Related questions
543
How to modify the fill color of an SVG image when being served as background image?
396
Convert SVG to image (JPEG, PNG, etc.) in the browser
0
imagemagick - convert does not work with use xlink:href in SVG - possible?
Load 5 more related questions Show fewer related questions

0

Reset to default

Browse other questions tagged or ask your own question.