{"id":6496,"date":"2019-02-20T14:56:53","date_gmt":"2019-02-20T13:56:53","guid":{"rendered":"https:\/\/hesmid.nl\/test\/?p=6496"},"modified":"2019-02-20T15:57:50","modified_gmt":"2019-02-20T14:57:50","slug":"styling-svg-content-with-css","status":"publish","type":"post","link":"https:\/\/hesmid.nl\/test\/styling-svg-content-with-css\/","title":{"rendered":"Styling SVG &lt;use&gt; Content with CSS"},"content":{"rendered":"\n<figure class=\"wp-block-embed-wordpress wp-block-embed is-type-wp-embed is-provider-codrops\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"ktriSExU2z\"><a href=\"https:\/\/tympanus.net\/codrops\/2015\/07\/16\/styling-svg-use-content-css\/\">Styling SVG &lt;use&gt; Content with CSS<\/a><\/blockquote><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" title=\"&#8220;Styling SVG &lt;use&gt; Content with CSS&#8221; &#8212; Codrops\" src=\"https:\/\/tympanus.net\/codrops\/2015\/07\/16\/styling-svg-use-content-css\/embed\/#?secret=DNkYHADJ1D#?secret=ktriSExU2z\" data-secret=\"ktriSExU2z\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Takeaway:<\/p>\n\n\n\n<p>Use css <em>variables<\/em> (or <em>custom properties<\/em>) to get access to the svg in the shadow DOM. <\/p>\n\n\n\n<p><a href=\"https:\/\/caniuse.com\/#feat=css-variables\">https:\/\/caniuse.com\/#feat=css-variables<\/a><\/p>\n\n\n\n<p>Example:<\/p>\n\n\n\n<!--more-->\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"302\" height=\"132\" src=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2019\/02\/image-1.png\" alt=\"\" class=\"wp-image-6508\" srcset=\"https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2019\/02\/image-1.png 302w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2019\/02\/image-1-150x66.png 150w, https:\/\/hesmid.nl\/test\/wp-content\/uploads\/2019\/02\/image-1-300x131.png 300w\" sizes=\"(max-width: 302px) 100vw, 302px\" \/><\/figure>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;svg class=\"icon\" viewBox=\"0 0 100 100\">\n  &lt;use xlink:href=\"#ic\" x=\"0\" y=\"0\" \/>\n&lt;\/svg>\n&lt;svg class=\"icon\" viewBox=\"0 0 100 100\">\n  &lt;use class=\"ic-1\" xlink:href=\"#ic\" x=\"0\" y=\"0\" \/>\n&lt;\/svg>\n&lt;svg class=\"icon\" viewBox=\"0 0 100 100\">\n  &lt;use class=\"ic-2\" xlink:href=\"#ic\" x=\"0\" y=\"0\" \/>\n&lt;\/svg>\n\n&lt;svg>\n  &lt;symbol id=\"ic\" fill=\"none\">\n    &lt;circle stroke=\"grey\" stroke-width=\"3\" style=\"stroke: var(--color1, grey)\" cx=\"50\" cy=\"50\" r=\"40\"\/>\n    &lt;circle stroke=\"orange\" stroke-width=\"3\" style=\"stroke: var(--color2, orange)\" cx=\"50\" cy=\"50\" r=\"20\"\/>\n  &lt;\/symbol>\n&lt;\/svg><\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>.icon {\n  width: 100px;\n  height: 100px;\n}\n.ic-1 {\n  --color1: #5af;\n  --color2: #5dd;\n}\n.ic-2 {\n  --color1: #a39;\n  --color2: #e39;\n}\n<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Takeaway: Use css variables (or custom properties) to get access to the svg in the shadow DOM. https:\/\/caniuse.com\/#feat=css-variables Example:<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[105],"tags":[37,130],"acf":[],"_links":{"self":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/6496"}],"collection":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/comments?post=6496"}],"version-history":[{"count":9,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/6496\/revisions"}],"predecessor-version":[{"id":10027,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/posts\/6496\/revisions\/10027"}],"wp:attachment":[{"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/media?parent=6496"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/categories?post=6496"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hesmid.nl\/test\/wp-json\/wp\/v2\/tags?post=6496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}