如何讓內聯 SVG 代碼充當背景圖像？

Question

我有從 illustrator 導出的內聯 svg 代碼，我將其用作背景圖像的疊加層。 我需要對齊某些元素，因此兩者都需要同等縮放，並且我需要將 svg 保留為代碼，因為某些元素將變為動畫。

我先把SVG代碼通過SVGOMG： https ://jakearchibald.github.io/svgomg/

然后我把它通過一個編碼器轉為 base64： https : //yoksel.github.io/url-encoder/

通過任何研究，我可以發現這就是 svg 代碼如何表現得像背景圖像一樣，但是我最終得到的代碼無法成功插入背景圖像屬性。 下面是一些示例代碼：

html：

<div id="mainSVG"></div>

scss：

#mainSVG{
background-position: center;
background-size: cover;
background-image: url("data:image/svg+xml,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjAiIHk9IjAiIHZpZXdCb3g9IjAgMCAxOTIwIDEwODAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KICA8ZyBpZD0ib3ZhbCI+DQogICAgPHBhdGggZD0iTTEwMzQuNSA3NjYuNWMtMTY1LjQgMC0zMjAuOS0yOS42My00MzcuODQtODMuNDMtNTYuODMtMjYuMTUtMTAxLjQ1LTU2LjU5LTEzMi42LTkwLjQ3LTMyLjIyLTM1LjA0LTQ4LjU1LTcyLjI1LTQ4LjU1LTExMC42czE2LjMzLTc1LjU2IDQ4LjU1LTExMC42YzMxLjE2LTMzLjg5IDc1Ljc3LTY0LjMzIDEzMi42LTkwLjQ3IDExNi45NC01My44IDI3Mi40NC04My40MyA0MzcuODQtODMuNDMgMTY1LjQgMCAzMjAuOSAyOS42MyA0MzcuODQgODMuNDMgNTYuODMgMjYuMTUgMTAxLjQ1IDU2LjU5IDEzMi42IDkwLjQ3IDMyLjIyIDM1LjA0IDQ4LjU1IDcyLjI1IDQ4LjU1IDExMC42cy0xNi4zMyA3NS41Ni00OC41NSAxMTAuNmMtMzEuMTYgMzMuODktNzUuNzcgNjQuMzMtMTMyLjYgOTAuNDctMTE2Ljk0IDUzLjgtMjcyLjQ0IDgzLjQzLTQzNy44NCA4My40M3oiLz4NCiAgICA8cGF0aCBkPSJNMTAzNC41IDE5OGM4My41NyAwIDE2NC42MyA3LjUzIDI0MC45NSAyMi4zOCA3My42OSAxNC4zNCAxMzkuODcgMzQuODYgMTk2LjY5IDYxIDU2Ljc3IDI2LjEyIDEwMS4zMyA1Ni41MiAxMzIuNDUgOTAuMzZDMTYzNi43MSA0MDYuNjkgMTY1MyA0NDMuNzggMTY1MyA0ODJzLTE2LjI5IDc1LjMxLTQ4LjQyIDExMC4yNmMtMzEuMTEgMzMuODQtNzUuNjcgNjQuMjQtMTMyLjQ1IDkwLjM2LTU2LjgyIDI2LjE0LTEyMyA0Ni42Ny0xOTYuNjkgNjEtNzYuMzEgMTQuODUtMTU3LjM3IDIyLjM4LTI0MC45NCAyMi4zOHMtMTY0LjYzLTcuNTMtMjQwLjk1LTIyLjM4Yy03My42OS0xNC4zNC0xMzkuODctMzQuODYtMTk2LjY5LTYxLTU2Ljc3LTI2LjEyLTEwMS4zMy01Ni41Mi0xMzIuNDUtOTAuMzZDNDMyLjI5IDU1Ny4zMSA0MTYgNTIwLjIyIDQxNiA0ODJzMTYuMjktNzUuMzEgNDguNDItMTEwLjI2YzMxLjExLTMzLjg0IDc1LjY3LTY0LjI0IDEzMi40NS05MC4zNiA1Ni44Mi0yNi4xNCAxMjMtNDYuNjcgMTk2LjY5LTYxQzg2OS44NyAyMDUuNTMgOTUwLjkzIDE5OCAxMDM0LjUgMTk4bTAtMUM2OTIuMzYgMTk3IDQxNSAzMjQuNiA0MTUgNDgyczI3Ny4zNiAyODUgNjE5LjUgMjg1UzE2NTQgNjM5LjQgMTY1NCA0ODJzLTI3Ny4zNi0yODUtNjE5LjUtMjg1eiIvPg0KICA8L2c+DQogIDxnIGlkPSJyZWN0YW5nbGUiPg0KICAgIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik03MzkuNSAzMTkuNWg1OTB2MzI2aC01OTB6Ii8+DQogICAgPHBhdGggZD0iTTEzMjkgMzIwdjMyNUg3NDBWMzIwaDU4OW0xLTFINzM5djMyN2g1OTFWMzE5eiIvPg0KICA8L2c+DQo8L3N2Zz4=");}

還嘗試將標准 svg 代碼放入 html 文件，然后使用 object-fit 和 object-position 屬性，但我想這僅適用於 img 和 video 標簽？

我確定我在這里遺漏了一些東西。 仍然是初學者，所以請耐心等待。

Answer 1

你快到了，但忘了指定data-uri編碼，以及<div> width和height ：

 #mainSVG { width: 200px; height: 100px; background-position: center; background-size: cover; background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjAiIHk9IjAiIHZpZXdCb3g9IjAgMCAxOTIwIDEwODAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KICA8ZyBpZD0ib3ZhbCI++DQogIDxnIGlkPSJyZWN0YW5nbGUiPg0KICAgIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik03MzkuNSAzMTkuNWg1OTB2MzI2aC01OTB6Ii8+DQogICAgPHBhdGggZD0iTTEzMjkgMzIwdjMyNUg3NDBWMzIwaDU4OW0xLTFINzM5djMyN2g1OTFWMzE5eiIvPg0KICA8L2c+DQo8L3N2Zz4="); }

 <div id="mainSVG"></div>

您也可以將 SVG 用作 HTML <svg>元素：

 #mainSVG { width: 200px; height: 100px; }

 <div id="mainSVG"> <svg viewBox="0 0 1920 1080"> <g id="oval"> <path d="M1034.5 766.5c-165.4 0-320.9-29.63-437.84-83.43-56.83-26.15-101.45-56.59-132.6-90.47-32.22-35.04-48.55-72.25-48.55-110.6s16.33-75.56 48.55-110.6c31.16-33.89 75.77-64.33 132.6-90.47 116.94-53.8 272.44-83.43 437.84-83.43 165.4 0 320.9 29.63 437.84 83.43 56.83 26.15 101.45 56.59 132.6 90.47 32.22 35.04 48.55 72.25 48.55 110.6s-16.33 75.56-48.55 110.6c-31.16 33.89-75.77 64.33-132.6 90.47-116.94 53.8-272.44 83.43-437.84 83.43z"/> <path d="M1034.5 198c83.57 0 164.63 7.53 240.95 22.38 73.69 14.34 139.87 34.86 196.69 61 56.77 26.12 101.33 56.52 132.45 90.36C1636.71 406.69 1653 443.78 1653 482s-16.29 75.31-48.42 110.26c-31.11 33.84-75.67 64.24-132.45 90.36-56.82 26.14-123 46.67-196.69 61-76.31 14.85-157.37 22.38-240.94 22.38s-164.63-7.53-240.95-22.38c-73.69-14.34-139.87-34.86-196.69-61-56.77-26.12-101.33-56.52-132.45-90.36C432.29 557.31 416 520.22 416 482s16.29-75.31 48.42-110.26c31.11-33.84 75.67-64.24 132.45-90.36 56.82-26.14 123-46.67 196.69-61C869.87 205.53 950.93 198 1034.5 198m0-1C692.36 197 415 324.6 415 482s277.36 285 619.5 285S1654 639.4 1654 482s-277.36-285-619.5-285z"/> </g> <g id="rectangle"> <path fill="#fff" d="M739.5 319.5h590v326h-590z"/> <path d="M1329 320v325H740V320h589m1-1H739v327h591V319z"/> </g> </svg> </div>

或者<img>帶有 SVG 文件路徑的 src 或 data-uri：

 <img width="200" height="100" src="data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjAiIHk9IjAiIHZpZXdCb3g9IjAgMCAxOTIwIDEwODAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KICA8ZyBpZD0ib3ZhbCI++DQogIDxnIGlkPSJyZWN0YW5nbGUiPg0KICAgIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik03MzkuNSAzMTkuNWg1OTB2MzI2aC01OTB6Ii8+DQogICAgPHBhdGggZD0iTTEzMjkgMzIwdjMyNUg3NDBWMzIwaDU4OW0xLTFINzM5djMyN2g1OTFWMzE5eiIvPg0KICA8L2c+DQo8L3N2Zz4=">

Answer 2

也許這會幫助你：

https://codepen.io/netsi1964/pen/HGJms

   <div class="bg"></div>

   .bg {
      background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><circle cx='15' cy='15' r='10' /></svg>")  no-repeat;
      height: 50px;
      width: 50px;
}