Как я могу получить встроенный SVG-код в качестве фонового изображения? - PullRequest
Новая
       17

Как я могу получить встроенный SVG-код в качестве фонового изображения?

1 голос
/ 01 марта 2020

У меня есть встроенный код SVG, экспортированный из иллюстратора, который я использую в качестве наложения на фоновое изображение. Мне нужно, чтобы некоторые элементы были выровнены, поэтому оба должны были бы масштабироваться одинаково, и мне нужно сохранить svg как код, потому что некоторые элементы будут анимированы.

Сначала я поместил код SVG через SVGOMG: https://jakearchibald.github.io/svgomg/

Затем я отправил его через энкодер на base64: https://yoksel.github.io/url-encoder/

С помощью любого исследования я мог выяснить, как может вести себя код SVG как фоновое изображение, однако код, с которым я закончил, не мог быть успешно подключен к свойству фонового изображения. Вот пример кода:

html: 

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

s css: 

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

Также попытался вставить стандартный код SVG в html затем файл, используя свойства подгонки объекта и положения объекта, но я думаю, это работает только для тегов img и video?

Я уверен, что что-то здесь не хватает. Еще новичок, поэтому, пожалуйста, потерпите меня.

Ответы [ 2 ]

1 голос
/ 01 марта 2020

Вы почти у цели, но забыли указать кодировку ваших data-uri, width и height ваших <div>: 

#mainSVG {
  width: 200px;
  height: 100px;
  background-position: center;
  background-size: cover;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjAiIHk9IjAiIHZpZXdCb3g9IjAgMCAxOTIwIDEwODAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KICA8ZyBpZD0ib3ZhbCI+DQogICAgPHBhdGggZD0iTTEwMzQuNSA3NjYuNWMtMTY1LjQgMC0zMjAuOS0yOS42My00MzcuODQtODMuNDMtNTYuODMtMjYuMTUtMTAxLjQ1LTU2LjU5LTEzMi42LTkwLjQ3LTMyLjIyLTM1LjA0LTQ4LjU1LTcyLjI1LTQ4LjU1LTExMC42czE2LjMzLTc1LjU2IDQ4LjU1LTExMC42YzMxLjE2LTMzLjg5IDc1Ljc3LTY0LjMzIDEzMi42LTkwLjQ3IDExNi45NC01My44IDI3Mi40NC04My40MyA0MzcuODQtODMuNDMgMTY1LjQgMCAzMjAuOSAyOS42MyA0MzcuODQgODMuNDMgNTYuODMgMjYuMTUgMTAxLjQ1IDU2LjU5IDEzMi42IDkwLjQ3IDMyLjIyIDM1LjA0IDQ4LjU1IDcyLjI1IDQ4LjU1IDExMC42cy0xNi4zMyA3NS41Ni00OC41NSAxMTAuNmMtMzEuMTYgMzMuODktNzUuNzcgNjQuMzMtMTMyLjYgOTAuNDctMTE2Ljk0IDUzLjgtMjcyLjQ0IDgzLjQzLTQzNy44NCA4My40M3oiLz4NCiAgICA8cGF0aCBkPSJNMTAzNC41IDE5OGM4My41NyAwIDE2NC42MyA3LjUzIDI0MC45NSAyMi4zOCA3My42OSAxNC4zNCAxMzkuODcgMzQuODYgMTk2LjY5IDYxIDU2Ljc3IDI2LjEyIDEwMS4zMyA1Ni41MiAxMzIuNDUgOTAuMzZDMTYzNi43MSA0MDYuNjkgMTY1MyA0NDMuNzggMTY1MyA0ODJzLTE2LjI5IDc1LjMxLTQ4LjQyIDExMC4yNmMtMzEuMTEgMzMuODQtNzUuNjcgNjQuMjQtMTMyLjQ1IDkwLjM2LTU2LjgyIDI2LjE0LTEyMyA0Ni42Ny0xOTYuNjkgNjEtNzYuMzEgMTQuODUtMTU3LjM3IDIyLjM4LTI0MC45NCAyMi4zOHMtMTY0LjYzLTcuNTMtMjQwLjk1LTIyLjM4Yy03My42OS0xNC4zNC0xMzkuODctMzQuODYtMTk2LjY5LTYxLTU2Ljc3LTI2LjEyLTEwMS4zMy01Ni41Mi0xMzIuNDUtOTAuMzZDNDMyLjI5IDU1Ny4zMSA0MTYgNTIwLjIyIDQxNiA0ODJzMTYuMjktNzUuMzEgNDguNDItMTEwLjI2YzMxLjExLTMzLjg0IDc1LjY3LTY0LjI0IDEzMi40NS05MC4zNiA1Ni44Mi0yNi4xNCAxMjMtNDYuNjcgMTk2LjY5LTYxQzg2OS44NyAyMDUuNTMgOTUwLjkzIDE5OCAxMDM0LjUgMTk4bTAtMUM2OTIuMzYgMTk3IDQxNSAzMjQuNiA0MTUgNDgyczI3Ny4zNiAyODUgNjE5LjUgMjg1UzE2NTQgNjM5LjQgMTY1NCA0ODJzLTI3Ny4zNi0yODUtNjE5LjUtMjg1eiIvPg0KICA8L2c+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> с sr c вашего пути к файлу SVG или data-uri: 

<img width="200" height="100" src="data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHg9IjAiIHk9IjAiIHZpZXdCb3g9IjAgMCAxOTIwIDEwODAiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KICA8ZyBpZD0ib3ZhbCI+DQogICAgPHBhdGggZD0iTTEwMzQuNSA3NjYuNWMtMTY1LjQgMC0zMjAuOS0yOS42My00MzcuODQtODMuNDMtNTYuODMtMjYuMTUtMTAxLjQ1LTU2LjU5LTEzMi42LTkwLjQ3LTMyLjIyLTM1LjA0LTQ4LjU1LTcyLjI1LTQ4LjU1LTExMC42czE2LjMzLTc1LjU2IDQ4LjU1LTExMC42YzMxLjE2LTMzLjg5IDc1Ljc3LTY0LjMzIDEzMi42LTkwLjQ3IDExNi45NC01My44IDI3Mi40NC04My40MyA0MzcuODQtODMuNDMgMTY1LjQgMCAzMjAuOSAyOS42MyA0MzcuODQgODMuNDMgNTYuODMgMjYuMTUgMTAxLjQ1IDU2LjU5IDEzMi42IDkwLjQ3IDMyLjIyIDM1LjA0IDQ4LjU1IDcyLjI1IDQ4LjU1IDExMC42cy0xNi4zMyA3NS41Ni00OC41NSAxMTAuNmMtMzEuMTYgMzMuODktNzUuNzcgNjQuMzMtMTMyLjYgOTAuNDctMTE2Ljk0IDUzLjgtMjcyLjQ0IDgzLjQzLTQzNy44NCA4My40M3oiLz4NCiAgICA8cGF0aCBkPSJNMTAzNC41IDE5OGM4My41NyAwIDE2NC42MyA3LjUzIDI0MC45NSAyMi4zOCA3My42OSAxNC4zNCAxMzkuODcgMzQuODYgMTk2LjY5IDYxIDU2Ljc3IDI2LjEyIDEwMS4zMyA1Ni41MiAxMzIuNDUgOTAuMzZDMTYzNi43MSA0MDYuNjkgMTY1MyA0NDMuNzggMTY1MyA0ODJzLTE2LjI5IDc1LjMxLTQ4LjQyIDExMC4yNmMtMzEuMTEgMzMuODQtNzUuNjcgNjQuMjQtMTMyLjQ1IDkwLjM2LTU2LjgyIDI2LjE0LTEyMyA0Ni42Ny0xOTYuNjkgNjEtNzYuMzEgMTQuODUtMTU3LjM3IDIyLjM4LTI0MC45NCAyMi4zOHMtMTY0LjYzLTcuNTMtMjQwLjk1LTIyLjM4Yy03My42OS0xNC4zNC0xMzkuODctMzQuODYtMTk2LjY5LTYxLTU2Ljc3LTI2LjEyLTEwMS4zMy01Ni41Mi0xMzIuNDUtOTAuMzZDNDMyLjI5IDU1Ny4zMSA0MTYgNTIwLjIyIDQxNiA0ODJzMTYuMjktNzUuMzEgNDguNDItMTEwLjI2YzMxLjExLTMzLjg0IDc1LjY3LTY0LjI0IDEzMi40NS05MC4zNiA1Ni44Mi0yNi4xNCAxMjMtNDYuNjcgMTk2LjY5LTYxQzg2OS44NyAyMDUuNTMgOTUwLjkzIDE5OCAxMDM0LjUgMTk4bTAtMUM2OTIuMzYgMTk3IDQxNSAzMjQuNiA0MTUgNDgyczI3Ny4zNiAyODUgNjE5LjUgMjg1UzE2NTQgNjM5LjQgMTY1NCA0ODJzLTI3Ny4zNi0yODUtNjE5LjUtMjg1eiIvPg0KICA8L2c+DQogIDxnIGlkPSJyZWN0YW5nbGUiPg0KICAgIDxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik03MzkuNSAzMTkuNWg1OTB2MzI2aC01OTB6Ii8+DQogICAgPHBhdGggZD0iTTEzMjkgMzIwdjMyNUg3NDBWMzIwaDU4OW0xLTFINzM5djMyN2g1OTFWMzE5eiIvPg0KICA8L2c+DQo8L3N2Zz4=">
0 голосов
/ 01 марта 2020

возможно это вам поможет:

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;
}
...