有沒有辦法讓 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 中，您還會發現它更容易。