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

Question

为了清楚起见，请查看此图像 [1]： https://i.stack.imgur.com/fgA6g.png

我在 web 页面中使用 svgs 进行绘画。 问题是它们渲染为矩形，并且使不需要的公共区域女巫使着色变得困难。 我希望他们没有周围的空白空间。 例如在上面的例子中，整个蓝色部分是可点击的，这使得其他 svg 的一部分无法访问。

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

如果您的意思是开发工具的蓝色正方形现在无法更改，它将始终是矩形或正方形，它只是您屏幕的面积这个蓝色矩形内的所有东西都可以是 svg 中您想要的任何形状。 例如：圆圈周围仍然会有蓝色方块

Answer 2

您似乎正在向<svg>元素添加点击处理程序。 <svg>元素具有矩形形状。 该矩形内的任何点击都将被该点击处理程序捕获。

是否有理由为每个彩虹乐队配备一个 SVG，并将它们堆叠在一起？ 这似乎是一种奇怪的方式。

如果您希望将点击限制在波段，则将点击处理程序应用于 forms 波段的<path>元素。

如果您将所有带<path>合并到一个 SVG 中，您还会发现它更容易。