{"id":246,"date":"2026-01-08T20:32:18","date_gmt":"2026-01-08T19:32:18","guid":{"rendered":"https:\/\/solarxbike.se\/labbet\/logo\/?p=246"},"modified":"2026-01-09T09:08:11","modified_gmt":"2026-01-09T08:08:11","slug":"svg-vector-path-version-4","status":"publish","type":"post","link":"https:\/\/solarxbike.se\/labbet\/logo\/2026\/01\/08\/svg-vector-path-version-4\/","title":{"rendered":"SVG vector [path] version 4"},"content":{"rendered":"\n\n\n<div class=\"controls\">\n  <button data-color=\"#33C1FF\">Knapp 1<\/button>\n  <button data-color=\"#8D33FF\">Knapp 2<\/button>\n  <button data-color=\"#33FF57\">Knapp 3<\/button>\n  <button data-color=\"#FFC733\">Knapp 4<\/button>\n  <button data-color=\"#FF3380\">Knapp 5<\/button>\n  <button data-color=\"#33FFF6\">Knapp 6<\/button>\n<\/div>\n\n<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"-50 -50 100 100\" class=\"snowflake\">\n  <g stroke=\"currentColor\" stroke-width=\"4\" stroke-linecap=\"round\" fill=\"currentColor\">\n    <polygon points=\"0,-10 8,-5 8,5 0,10 -8,5 -8,-5\" fill=\"currentColor\"\/>\n    <g id=\"arm\">\n      <line x1=\"0\" y1=\"0\" x2=\"0\" y2=\"-40\"\/>\n      <line x1=\"0\" y1=\"-18\" x2=\"-12\" y2=\"-26\"\/>\n      <line x1=\"0\" y1=\"-18\" x2=\"12\" y2=\"-26\"\/>\n      <line x1=\"0\" y1=\"-28\" x2=\"-11\" y2=\"-36\"\/>\n      <line x1=\"0\" y1=\"-28\" x2=\"11\" y2=\"-36\"\/>\n    <\/g>\n    <use href=\"#arm\" transform=\"rotate(0)\"\/>\n    <use href=\"#arm\" transform=\"rotate(60)\"\/>\n    <use href=\"#arm\" transform=\"rotate(120)\"\/>\n    <use href=\"#arm\" transform=\"rotate(180)\"\/>\n    <use href=\"#arm\" transform=\"rotate(240)\"\/>\n    <use href=\"#arm\" transform=\"rotate(300)\"\/>\n  <\/g>\n<\/svg>\n\n<script>\nconst buttons = document.querySelectorAll('.controls button');\nconst snowflake = document.querySelector('.snowflake');\n\nbuttons.forEach(btn => {\n  btn.addEventListener('click', () => {\n    const color = btn.getAttribute('data-color');\n    \/\/ \u00e4ndra b\u00e5de fill och stroke\n    snowflake.querySelectorAll('*').forEach(el => {\n      el.setAttribute('fill', color);\n      el.setAttribute('stroke', color);\n    });\n  });\n});\n<\/script>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-css\">&lt;div class=&quot;controls&quot;&gt;\n  &lt;button data-color=&quot;#33C1FF&quot;&gt;Knapp 1&lt;\/button&gt;\n  &lt;button data-color=&quot;#8D33FF&quot;&gt;Knapp 2&lt;\/button&gt;\n  &lt;button data-color=&quot;#33FF57&quot;&gt;Knapp 3&lt;\/button&gt;\n  &lt;button data-color=&quot;#FFC733&quot;&gt;Knapp 4&lt;\/button&gt;\n  &lt;button data-color=&quot;#FF3380&quot;&gt;Knapp 5&lt;\/button&gt;\n  &lt;button data-color=&quot;#33FFF6&quot;&gt;Knapp 6&lt;\/button&gt;\n&lt;\/div&gt;\n\n&lt;svg xmlns=&quot;http:\/\/www.w3.org\/2000\/svg&quot; viewBox=&quot;-50 -50 100 100&quot; class=&quot;snowflake&quot;&gt;\n  &lt;g stroke=&quot;currentColor&quot; stroke-width=&quot;4&quot; stroke-linecap=&quot;round&quot; fill=&quot;currentColor&quot;&gt;\n    &lt;polygon points=&quot;0,-10 8,-5 8,5 0,10 -8,5 -8,-5&quot; fill=&quot;currentColor&quot;\/&gt;\n    &lt;g id=&quot;arm&quot;&gt;\n      &lt;line x1=&quot;0&quot; y1=&quot;0&quot; x2=&quot;0&quot; y2=&quot;-40&quot;\/&gt;\n      &lt;line x1=&quot;0&quot; y1=&quot;-18&quot; x2=&quot;-12&quot; y2=&quot;-26&quot;\/&gt;\n      &lt;line x1=&quot;0&quot; y1=&quot;-18&quot; x2=&quot;12&quot; y2=&quot;-26&quot;\/&gt;\n      &lt;line x1=&quot;0&quot; y1=&quot;-28&quot; x2=&quot;-11&quot; y2=&quot;-36&quot;\/&gt;\n      &lt;line x1=&quot;0&quot; y1=&quot;-28&quot; x2=&quot;11&quot; y2=&quot;-36&quot;\/&gt;\n    &lt;\/g&gt;\n    &lt;use href=&quot;#arm&quot; transform=&quot;rotate(0)&quot;\/&gt;\n    &lt;use href=&quot;#arm&quot; transform=&quot;rotate(60)&quot;\/&gt;\n    &lt;use href=&quot;#arm&quot; transform=&quot;rotate(120)&quot;\/&gt;\n    &lt;use href=&quot;#arm&quot; transform=&quot;rotate(180)&quot;\/&gt;\n    &lt;use href=&quot;#arm&quot; transform=&quot;rotate(240)&quot;\/&gt;\n    &lt;use href=&quot;#arm&quot; transform=&quot;rotate(300)&quot;\/&gt;\n  &lt;\/g&gt;\n&lt;\/svg&gt;\n\n&lt;script&gt;\nconst buttons = document.querySelectorAll(&#039;.controls button&#039;);\nconst snowflake = document.querySelector(&#039;.snowflake&#039;);\n\nbuttons.forEach(btn =&gt; {\n  btn.addEventListener(&#039;click&#039;, () =&gt; {\n    const color = btn.getAttribute(&#039;data-color&#039;);\n    \/\/ \u00e4ndra b\u00e5de fill och stroke\n    snowflake.querySelectorAll(&#039;*&#039;).forEach(el =&gt; {\n      el.setAttribute(&#039;fill&#039;, color);\n      el.setAttribute(&#039;stroke&#039;, color);\n    });\n  });\n});\n&lt;\/script&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Knapp 1 Knapp 2 Knapp 3 Knapp 4 Knapp 5 Knapp 6<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"","activitypub_status":"federated","footnotes":""},"categories":[1],"tags":[6],"class_list":["post-246","post","type-post","status-publish","format-standard","hentry","category-okategoriserade","tag-javascript"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/solarxbike.se\/labbet\/logo\/wp-json\/wp\/v2\/posts\/246","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/solarxbike.se\/labbet\/logo\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/solarxbike.se\/labbet\/logo\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/solarxbike.se\/labbet\/logo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/solarxbike.se\/labbet\/logo\/wp-json\/wp\/v2\/comments?post=246"}],"version-history":[{"count":9,"href":"https:\/\/solarxbike.se\/labbet\/logo\/wp-json\/wp\/v2\/posts\/246\/revisions"}],"predecessor-version":[{"id":330,"href":"https:\/\/solarxbike.se\/labbet\/logo\/wp-json\/wp\/v2\/posts\/246\/revisions\/330"}],"wp:attachment":[{"href":"https:\/\/solarxbike.se\/labbet\/logo\/wp-json\/wp\/v2\/media?parent=246"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/solarxbike.se\/labbet\/logo\/wp-json\/wp\/v2\/categories?post=246"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/solarxbike.se\/labbet\/logo\/wp-json\/wp\/v2\/tags?post=246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}