有没有办法让 svg 不是矩形？

Question

Please see this image for clarity [1]: https://i.stack.imgur.com/fgA6g.png

I use svgs for painting in a web page. The problem is they are rendering as rectangle and making an unwanted common area witch makes the coloring difficult. I want them without the empty space around them. For example in the example above the whole blue section is clickable witch makes part of the other svg unreachable.

import SVG from 'react-inlinesvg';

<div
              key={object.id}
              className="click-object"
              style={{
                position: 'absolute',
                left: `${object.x}%`,
                top: `${object.y}%`,
                width: `${object.width}%`,
                objectFit: 'contain',
                zIndex: '8',
                padding: 0,
              }}
            >
                 <SVG
                  src={object.image}
                  style={{
                    width: '100%',
                    height: '100%',
                    cursor: 'pointer',
                    objectFit: 'contain',
                    color:
                      selectedColor
                        ? selectedColor
                        : object.initial_color,
                  }}

                  onClick={() => setSelectedColor(object.color)}
                />
</div>

Answer 1

if you mean the blue square for the dev tool now it's can't be change it will be always rectangular or square it just the area it takes of your screen all the thing inside this blue rectangle can be any shape you want in svg. for example: circle will still have blue square around them

Answer 2

You appear to be adding a click handler to the <svg> element. The <svg> element has a rectangular shape. Any clicks within that rectangle, will be captured by that click handler.

Is there a reason why you have one SVG for each rainbow band, and stack them on top of one another? It seems an odd way to do it.

If you want clicks to be limited to the band, then apply the click handler to the <path> element that forms the band.

You will also find it much easier if you merge all the band <path> into one SVG.