如何在SVG形狀上添加雙邊框

假設有人要求您在一些隨機的幾何SVG形狀中添加雙重邊框。由於某種原因，您無法使用任何圖形編輯器（需要在運行時生成它們），因此您必須使用CSS或SVG語法中解決它。

您的第一個問題可能是：是否有諸如中風風格的東西：SVG中的Double？好吧，答案還沒有，這並不容易。但是無論如何，我都會嘗試發現我可以發現哪些方法。我將探索三種不同基本形狀的可能性：圓，矩形和多邊形。指向可以在兩條線的中間保持透明顏色的那些。

擾流板警報：所有結果至少在CSS和SVG中都具有不利影響，但讓我介紹您的意圖。

簡單的解決方案

這些並不能與所有形狀一起使用，但它們是最簡單的解決方案。

輪廓和盒子陰影

CSS屬性概述和盒子陰影僅適用於形狀或SVG的邊界框，因此兩者僅適用於正方形和矩形的絕佳解決方案。它們還可以使用自定義屬性允許靈活的顏色。

它僅需使用兩條CSS的輪廓線，而且可以使背景顏色通過形狀可見。

• ？僅用於一種形狀。
• ✅簡單的代碼
• ✅邊界很光滑
• ✅透明背景

盒子陰影只需要一行CSS，但是我們必須確保每個形狀都有自己的SVG，因為我們不能直接將盒子陰影直接應用到形狀上。要考慮的另一件事是，我們必須在聲明中應用背景的顏色。

• ？僅用於一種形狀
• ✅簡單的代碼
• ✅邊界很光滑
• ？沒有透明背景

SVG梯度

SVG徑向梯度僅在圓圈上起作用☺️。我們可以將梯度直接應用於中風，但是最好使用變量，因為我們必須在代碼中多次聲明顏色。

• ？僅用於一種形狀
• ✅簡單的代碼
• ？邊界很光滑
• ？沒有透明背景

所有形狀的解決方案

這些將與所有形狀一起使用，但是代碼可能會變成腫或複雜。

過濾器：drop-shadow（）

最後，一個解決所有形狀的解決方案！我們必須具有自己的

• ✅所有形狀的解決方案
• ✅簡單的代碼
• ？邊界看起來像素化
• ？沒有透明背景

SVG過濾器

這是一個非常靈活的解決方案。我們可以創建一個過濾器，並通過SVG的過濾器屬性將其添加到形狀中。這裡複雜的部分是過濾器本身。我們需要三幅畫，一幅用於外邊界，一幅用於背景洪水，最後一幅用於繪製前面的形狀。結果看起來比使用DropShod更好，但是邊界仍然是像素化的。

• ✅所有形狀的解決方案
• ？複雜代碼
• ？邊界看起來像素化
• ？沒有透明背景

重複形狀

這裡有幾個可能的選項。

選項1：變換

該解決方案需要轉換。我們將一個人物放在另一個圖形上，其中主人物具有填充的顏色和筆觸顏色，而另一個圖形沒有填充，紅色衝程，並縮放並重新定位到中心。我們在上定義了形狀。訣竅是將視圖框的一半轉換為負空間，以便當我們擴展它們時，我們可以從圖中的中心進行操作。

• ✅所有形狀的解決方案
• ？重複的代碼
• ✅邊界很光滑
• ✅透明背景

選項2：

我在Doug Schepers的WWW-SVG郵件列表中找到了一個巧妙的解決方案，該解決方案使用SVG 。同樣，它需要定義一次形狀，並使用兩次指它們。這次，主要形狀的中風更大。主要形狀的第二個ShapeHashalfthestroke，無填充，Anda筆觸與背景顏色相匹配。

• ✅所有形狀的解決方案
• ？重複的代碼
• ✅邊界很光滑
• ？沒有透明背景

這是完整的結果！

就是這樣，您將它們全部放在一個地方。讓我知道您可以想到其他可能的解決方案！

以上是如何在SVG形狀上添加雙邊框的詳細內容。更多資訊請關注PHP中文網其他相關文章！