css - how to change the color of an svg which is used as a background image -
this question has answer here:
i'd use different colors svg (lotos flower). let's green 1 in box named tops, red lounge, white rest. want set colors via css.
the svg referenced background image in css:
background-image: url("https://cdn.shopify.com/s/files/1/1011/6932/t/20/assets/lotos.svg?14455316687248826498");
how can accomplish this?
since cannot manipulate svg using background-image, can embed svg data directly background-image property , change color there.
the value quite big though. consider cleaning svg web first.
body { margin: 0; } main { height: 100vh; background-color: blue; display: flex; } section { flex: 1; border: 1px solid white; } section:first-of-type { background: url('data:image/svg+xml,<%3fxml%20version%3d"1.0"%20encoding%3d"utf-8"%3f>%0d%0a<%21--%20generator%3a%20adobe%20illustrator%2015.0.0%2c%20svg%20export%20plug-in%20.%20svg%20version%3a%206.00%20build%200%29%20%20-->%0d%0a<%21doctype%20svg%20public%20"-%2f%2fw3c%2f%2fdtd%20svg%201.1%2f%2fen"%20"http%3a%2f%2fwww.w3.org%2fgraphics%2fsvg%2f1.1%2fdtd%2fsvg11.dtd">%0d%0a<svg%20version%3d"1.1"%20id%3d"ebene_1"%20xmlns%3d"http%3a%2f%2fwww.w3.org%2f2000%2fsvg"%20xmlns%3axlink%3d"http%3a%2f%2fwww.w3.org%2f1999%2fxlink"%20x%3d"0px"%20y%3d"0px"%0d%0a%09%20width%3d"672.71px"%20height%3d"379.628px"%20viewbox%3d"59.351%2081.032%20672.71%20379.628"%0d%0a%09%20enable-background%3d"new%2059.351%2081.032%20672.71%20379.628"%20xml%3aspace%3d"preserve">%0d%0a<g>%0d%0a%09<title>layer%201<%2ftitle>%0d%0a%09<g%20id%3d"layer1">%0d%0a%09%09<g%20id%3d"g2095"%20transform%3d"matrix%280.77583%200%200%200.774211%20112.167%20-7.5811%29">%0d%0a%09%09%09%0d%0a%09%09%09%09<path%20id%3d"path2212"%20fill%3d"%23ffffff"%20stroke%3d"%23ffffff"%20stroke-width%3d"1.6181"%20stroke-linecap%3d"round"%20stroke-linejoin%3d"round"%20stroke-miterlimit%3d"1"%20stroke-opacity%3d"0.8378"%20d%3d"%0d%0a%09%09%09%09m366.412%2c114.456c-58.38%2c37.896-99.191%2c124.033-99.191%2c224.206s40.811%2c186.279%2c99.191%2c224.175%0d%0a%09%09%09%09c58.38-37.896%2c99.192-124.002%2c99.192-224.175s424.792%2c152.352%2c366.412%2c114.456z"%2f>%0d%0a%09%09%09%0d%0a%09%09%09%09<path%20id%3d"path2216"%20fill%3d"%23ffffff"%20stroke%3d"%23ffffff"%20stroke-width%3d"1.6181"%20stroke-linecap%3d"round"%20stroke-linejoin%3d"round"%20stroke-miterlimit%3d"1"%20stroke-opacity%3d"0.8378"%20d%3d"%0d%0a%09%09%09%09m568.181%2c156.506c-39.405%2c5.773-80.16%2c28.352-115.656%2c63.625c13.473%2c35.391%2c21.188%2c76.214%2c21.188%2c119.688%0d%0a%09%09%09%09c0%2c97.44-38.692%2c181.416-94.532%2c220.812c0.663%2c1.109%2c1.251%2c2.291%2c1.938%2c3.374c68.867-10.087%2c141.899-71.333%2c183.687-162.374%0d%0a%09%09%09%09c606.593%2c310.59%2c605.43%2c215.302%2c568.181%2c156.506l568.181%2c156.506z"%2f>%0d%0a%09%09%09%0d%0a%09%09%09%09<path%20id%3d"path3067"%20fill%3d"%23ffffff"%20stroke%3d"%23ffffff"%20stroke-width%3d"1.6181"%20stroke-linecap%3d"round"%20stroke-linejoin%3d"round"%20stroke-miterlimit%3d"1"%20stroke-opacity%3d"0.8378"%20d%3d"%0d%0a%09%09%09%09m679.612%2c262.24c-24.545-0.256-50.831%2c4.35-77.406%2c13.437c-0.93%2c41.342-10.987%2c86.244-31.157%2c130.188%0d%0a%09%09%09%09c-41.629%2c90.697-114.269%2c151.783-182.905%2c162.22c0.067%2c0.431%2c0.084%2c0.883%2c0.156%2c1.312c67.332%2c17.63%2c158.454-10.22%2c232.499-77.686%0d%0a%09%09%09%09c74.045-67.469%2c110.246-155.635%2c98.938-224.312c707.112%2c264.091%2c693.642%2c262.387%2c679.612%2c262.24z"%2f>%0d%0a%09%09%09%0d%0a%09%09%09%09<path%20id%3d"path3086"%20fill%3d"%23ffffff"%20stroke%3d"%23ffffff"%20stroke-width%3d"1.6181"%20stroke-linecap%3d"round"%20stroke-linejoin%3d"round"%20stroke-miterlimit%3d"1"%20stroke-opacity%3d"0.8378"%20d%3d"%0d%0a%09%09%09%09m716.165%2c361.792c-15.06%2c46.788-45.768%2c94.815-90.281%2c135.375c-72.406%2c65.977-161.085%2c93.963-227.938%2c78.688%0d%0a%09%09%09%09c-1.694%2c0.318-3.402%2c0.713-5.093%2c0.969c-0.043%2c0.241-0.092%2c0.482-0.126%2c0.719c59.037%2c36.866%2c154.328%2c37.412%2c245.094-4.969%0d%0a%09%09%09%09c90.766-42.382%2c151.549-115.82%2c161.187-184.751c776.087%2c373.51%2c747.636%2c364.767%2c716.165%2c361.792z"%2f>%0d%0a%09%09%09%0d%0a%09%09%09%09<path%20id%3d"path3090"%20fill%3d"%23ffffff"%20stroke%3d"%23ffffff"%20stroke-width%3d"1.6181"%20stroke-linecap%3d"round"%20stroke-linejoin%3d"round"%20stroke-miterlimit%3d"1"%20stroke-opacity%3d"0.8378"%20d%3d"%0d%0a%09%09%09%09m165.891%2c156.144c39.405%2c5.773%2c80.16%2c28.352%2c115.656%2c63.625c-13.473%2c35.39-21.187%2c76.213-21.187%2c119.687%0d%0a%09%09%09%09c0%2c97.442%2c38.692%2c181.416%2c94.531%2c220.812c-0.662%2c1.11-1.25%2c2.291-1.937%2c3.375c-68.867-10.088-141.901-71.335-183.688-162.375%0d%0a%09%09%09%09c127.479%2c310.228%2c128.642%2c214.938%2c165.891%2c156.144l165.891%2c156.144z"%2f>%0d%0a%09%09%09%0d%0a%09%09%09%09<path%20id%3d"path3094"%20fill%3d"%23ffffff"%20stroke%3d"%23ffffff"%20stroke-width%3d"1.6181"%20stroke-linecap%3d"round"%20stroke-linejoin%3d"round"%20stroke-miterlimit%3d"1"%20stroke-opacity%3d"0.8378"%20d%3d"%0d%0a%09%09%09%09m53.72%2c259.802c24.545-0.256%2c50.831%2c4.35%2c77.406%2c13.437c0.928%2c41.341%2c10.986%2c86.244%2c31.156%2c130.187%0d%0a%09%09%09%09c41.629%2c90.697%2c114.269%2c151.783%2c182.906%2c162.218c-0.068%2c0.433-0.087%2c0.883-0.156%2c1.313%0d%0a%09%09%09%09c-67.332%2c17.629-158.456-10.22-232.502-77.688c38.487%2c421.802%2c2.287%2c333.635%2c13.594%2c264.958%0d%0a%09%09%09%09c26.219%2c261.653%2c39.69%2c259.948%2c53.72%2c259.802l53.72%2c259.802z"%2f>%0d%0a%09%09%09%0d%0a%09%09%09%09<path%20id%3d"path3098"%20fill%3d"%23ffffff"%20stroke%3d"%23ffffff"%20stroke-width%3d"1.6181"%20stroke-linecap%3d"round"%20stroke-linejoin%3d"round"%20stroke-miterlimit%3d"1"%20stroke-opacity%3d"0.84"%20d%3d"%0d%0a%09%09%09%09m16.467%2c358.742c15.06%2c46.788%2c45.768%2c94.815%2c90.281%2c135.375c72.408%2c65.977%2c161.085%2c93.963%2c227.938%2c78.688%0d%0a%09%09%09%09c1.697%2c0.318%2c3.402%2c0.713%2c5.094%2c0.969c0.043%2c0.238%2c0.092%2c0.482%2c0.125%2c0.719c-59.036%2c36.866-154.328%2c37.412-245.094-4.969%0d%0a%09%09%09%09c4.044%2c527.142-56.738%2c453.704-66.377%2c384.773c-43.455%2c370.46-15.003%2c361.717%2c16.467%2c358.742l16.467%2c358.742z"%2f>%0d%0a%09%09<%2fg>%0d%0a%09<%2fg>%0d%0a<%2fg>%0d%0a<rect%20id%3d"_x3c_slice_x3e_"%20x%3d"59.351"%20y%3d"79.76"%20fill%3d"none"%20width%3d"674"%20height%3d"380.9"%2f>%0d%0a<%2fsvg>%0d%0a') center center no-repeat / cover; } section:last-of-type { background: url('data:image/svg+xml,<%3fxml%20version%3d"1.0"%20encoding%3d"utf-8"%3f>%0d%0a<%21--%20generator%3a%20adobe%20illustrator%2015.0.0%2c%20svg%20export%20plug-in%20.%20svg%20version%3a%206.00%20build%200%29%20%20-->%0d%0a<%21doctype%20svg%20public%20"-%2f%2fw3c%2f%2fdtd%20svg%201.1%2f%2fen"%20"http%3a%2f%2fwww.w3.org%2fgraphics%2fsvg%2f1.1%2fdtd%2fsvg11.dtd">%0d%0a<svg%20version%3d"1.1"%20id%3d"ebene_1"%20xmlns%3d"http%3a%2f%2fwww.w3.org%2f2000%2fsvg"%20xmlns%3axlink%3d"http%3a%2f%2fwww.w3.org%2f1999%2fxlink"%20x%3d"0px"%20y%3d"0px"%0d%0a%09%20width%3d"672.71px"%20height%3d"379.628px"%20viewbox%3d"59.351%2081.032%20672.71%20379.628"%0d%0a%09%20enable-background%3d"new%2059.351%2081.032%20672.71%20379.628"%20xml%3aspace%3d"preserve">%0d%0a<g>%0d%0a%09<title>layer%201<%2ftitle>%0d%0a%09<g%20id%3d"layer1">%0d%0a%09%09<g%20id%3d"g2095"%20transform%3d"matrix%280.77583%200%200%200.774211%20112.167%20-7.5811%29">%0d%0a%09%09%09%0d%0a%09%09%09%09<path%20id%3d"path2212"%20fill%3d"%23ff0"%20stroke%3d"%23ffffff"%20stroke-width%3d"1.6181"%20stroke-linecap%3d"round"%20stroke-linejoin%3d"round"%20stroke-miterlimit%3d"1"%20stroke-opacity%3d"0.8378"%20d%3d"%0d%0a%09%09%09%09m366.412%2c114.456c-58.38%2c37.896-99.191%2c124.033-99.191%2c224.206s40.811%2c186.279%2c99.191%2c224.175%0d%0a%09%09%09%09c58.38-37.896%2c99.192-124.002%2c99.192-224.175s424.792%2c152.352%2c366.412%2c114.456z"%2f>%0d%0a%09%09%09%0d%0a%09%09%09%09<path%20id%3d"path2216"%20fill%3d"%23ff0"%20stroke%3d"%23ffffff"%20stroke-width%3d"1.6181"%20stroke-linecap%3d"round"%20stroke-linejoin%3d"round"%20stroke-miterlimit%3d"1"%20stroke-opacity%3d"0.8378"%20d%3d"%0d%0a%09%09%09%09m568.181%2c156.506c-39.405%2c5.773-80.16%2c28.352-115.656%2c63.625c13.473%2c35.391%2c21.188%2c76.214%2c21.188%2c119.688%0d%0a%09%09%09%09c0%2c97.44-38.692%2c181.416-94.532%2c220.812c0.663%2c1.109%2c1.251%2c2.291%2c1.938%2c3.374c68.867-10.087%2c141.899-71.333%2c183.687-162.374%0d%0a%09%09%09%09c606.593%2c310.59%2c605.43%2c215.302%2c568.181%2c156.506l568.181%2c156.506z"%2f>%0d%0a%09%09%09%0d%0a%09%09%09%09<path%20id%3d"path3067"%20fill%3d"%23ff0"%20stroke%3d"%23ffffff"%20stroke-width%3d"1.6181"%20stroke-linecap%3d"round"%20stroke-linejoin%3d"round"%20stroke-miterlimit%3d"1"%20stroke-opacity%3d"0.8378"%20d%3d"%0d%0a%09%09%09%09m679.612%2c262.24c-24.545-0.256-50.831%2c4.35-77.406%2c13.437c-0.93%2c41.342-10.987%2c86.244-31.157%2c130.188%0d%0a%09%09%09%09c-41.629%2c90.697-114.269%2c151.783-182.905%2c162.22c0.067%2c0.431%2c0.084%2c0.883%2c0.156%2c1.312c67.332%2c17.63%2c158.454-10.22%2c232.499-77.686%0d%0a%09%09%09%09c74.045-67.469%2c110.246-155.635%2c98.938-224.312c707.112%2c264.091%2c693.642%2c262.387%2c679.612%2c262.24z"%2f>%0d%0a%09%09%09%0d%0a%09%09%09%09<path%20id%3d"path3086"%20fill%3d"%23ff0"%20stroke%3d"%23ffffff"%20stroke-width%3d"1.6181"%20stroke-linecap%3d"round"%20stroke-linejoin%3d"round"%20stroke-miterlimit%3d"1"%20stroke-opacity%3d"0.8378"%20d%3d"%0d%0a%09%09%09%09m716.165%2c361.792c-15.06%2c46.788-45.768%2c94.815-90.281%2c135.375c-72.406%2c65.977-161.085%2c93.963-227.938%2c78.688%0d%0a%09%09%09%09c-1.694%2c0.318-3.402%2c0.713-5.093%2c0.969c-0.043%2c0.241-0.092%2c0.482-0.126%2c0.719c59.037%2c36.866%2c154.328%2c37.412%2c245.094-4.969%0d%0a%09%09%09%09c90.766-42.382%2c151.549-115.82%2c161.187-184.751c776.087%2c373.51%2c747.636%2c364.767%2c716.165%2c361.792z"%2f>%0d%0a%09%09%09%0d%0a%09%09%09%09<path%20id%3d"path3090"%20fill%3d"%23ff0"%20stroke%3d"%23ffffff"%20stroke-width%3d"1.6181"%20stroke-linecap%3d"round"%20stroke-linejoin%3d"round"%20stroke-miterlimit%3d"1"%20stroke-opacity%3d"0.8378"%20d%3d"%0d%0a%09%09%09%09m165.891%2c156.144c39.405%2c5.773%2c80.16%2c28.352%2c115.656%2c63.625c-13.473%2c35.39-21.187%2c76.213-21.187%2c119.687%0d%0a%09%09%09%09c0%2c97.442%2c38.692%2c181.416%2c94.531%2c220.812c-0.662%2c1.11-1.25%2c2.291-1.937%2c3.375c-68.867-10.088-141.901-71.335-183.688-162.375%0d%0a%09%09%09%09c127.479%2c310.228%2c128.642%2c214.938%2c165.891%2c156.144l165.891%2c156.144z"%2f>%0d%0a%09%09%09%0d%0a%09%09%09%09<path%20id%3d"path3094"%20fill%3d"%23ff0"%20stroke%3d"%23ffffff"%20stroke-width%3d"1.6181"%20stroke-linecap%3d"round"%20stroke-linejoin%3d"round"%20stroke-miterlimit%3d"1"%20stroke-opacity%3d"0.8378"%20d%3d"%0d%0a%09%09%09%09m53.72%2c259.802c24.545-0.256%2c50.831%2c4.35%2c77.406%2c13.437c0.928%2c41.341%2c10.986%2c86.244%2c31.156%2c130.187%0d%0a%09%09%09%09c41.629%2c90.697%2c114.269%2c151.783%2c182.906%2c162.218c-0.068%2c0.433-0.087%2c0.883-0.156%2c1.313%0d%0a%09%09%09%09c-67.332%2c17.629-158.456-10.22-232.502-77.688c38.487%2c421.802%2c2.287%2c333.635%2c13.594%2c264.958%0d%0a%09%09%09%09c26.219%2c261.653%2c39.69%2c259.948%2c53.72%2c259.802l53.72%2c259.802z"%2f>%0d%0a%09%09%09%0d%0a%09%09%09%09<path%20id%3d"path3098"%20fill%3d"%23ff0"%20stroke%3d"%23ffffff"%20stroke-width%3d"1.6181"%20stroke-linecap%3d"round"%20stroke-linejoin%3d"round"%20stroke-miterlimit%3d"1"%20stroke-opacity%3d"0.84"%20d%3d"%0d%0a%09%09%09%09m16.467%2c358.742c15.06%2c46.788%2c45.768%2c94.815%2c90.281%2c135.375c72.408%2c65.977%2c161.085%2c93.963%2c227.938%2c78.688%0d%0a%09%09%09%09c1.697%2c0.318%2c3.402%2c0.713%2c5.094%2c0.969c0.043%2c0.238%2c0.092%2c0.482%2c0.125%2c0.719c-59.036%2c36.866-154.328%2c37.412-245.094-4.969%0d%0a%09%09%09%09c4.044%2c527.142-56.738%2c453.704-66.377%2c384.773c-43.455%2c370.46-15.003%2c361.717%2c16.467%2c358.742l16.467%2c358.742z"%2f>%0d%0a%09%09<%2fg>%0d%0a%09<%2fg>%0d%0a<%2fg>%0d%0a<rect%20id%3d"_x3c_slice_x3e_"%20x%3d"59.351"%20y%3d"79.76"%20fill%3d"none"%20width%3d"674"%20height%3d"380.9"%2f>%0d%0a<%2fsvg>%0d%0a') center center no-repeat / cover; }<main> <section></section> <section></section> </main>another alternative, imo better, add svg html, create svg spritesheet , use svg icons <symbol> , <use> tags.
Comments
Post a Comment