如何使用 svg 文件和 css 更改線條的顏色？

Question

我在下面的網站上自定義了一個 SVG 文件，以在一個塊中制作背景：

https://heropatterns.com/

當我將代碼粘貼到style.css文件中時，代碼長達數百行：

這正是我想要達到的結果：

現在我想下載 SVG 文件以減輕我的 style.css 文件，但沒有自定義樣式應用於 SVG：

我在我的塊上使用此代碼：

.embedded-entity .node--type-track {
    padding: 1rem 1rem 0.2rem 1rem;
    border: 2px solid #ced8dd;
    background: #f7f9fa;
    background-image: url("/themes/subtheme_olivero/images/topography.svg");
}

背景有效，但是如何使用這種#f7f9fa顏色放置線條？

Answer 1

在您在https://svgshare.com/i/iQk.svg上共享的文件中，您首先從https://heropatterns.com/復制的代碼中沒有填充不透明度。 因此背景顏色沒有顯示出來——它只是一個黑白圖案。

在這個例子中，我選擇了更簡單的模式。 這個想法是你有1）前景色，2）背景色和3）填充不透明度。 在我的示例中，背景顏色是綠色。 這是定義為圖像后面/背景的顏色。 前景色（紅色）定義了 SVG 中定義的形狀的顏色——您可以在 SVG 代碼中將其視為填充屬性。 最后你有 fill-opacity （也是一個 SVG 屬性），它定義了在圖案中可以看到多少背景 如果它是 0，那么它只是你可以看到的純色背景，如果它是 1，那么形狀如果 SVG具有前景色的顏色。

 div { width: 300px; height: 300px; background-color: green; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='red' fill-opacity='1'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }

 <div></div>

當我看到您的示例屏幕轉儲時，它看起來前景色可能太暗了。 在下一個示例中，我使用了背景顏色、灰色填充和 0.3 的填充不透明度。

 div { width: 300px; height: 300px; background-color: #f7f9fa; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='gray' fill-opacity='.3'%3E%3Cpath d='M0 38.59l2.83-2.83 1.41 1.41L1.41 40H0v-1.41zM0 1.4l2.83 2.83 1.41-1.41L1.41 0H0v1.41zM38.59 40l-2.83-2.83 1.41-1.41L40 38.59V40h-1.41zM40 1.41l-2.83 2.83-1.41-1.41L38.59 0H40v1.41zM20 18.6l2.83-2.83 1.41 1.41L21.41 20l2.83 2.83-1.41 1.41L20 21.41l-2.83 2.83-1.41-1.41L18.59 20l-2.83-2.83 1.41-1.41L20 18.59z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }

 <div></div>