Comments (3)
Yeah, that's pretty unreadable 😐
Taking a quick glance at "My splitted "custom_fields" code after update:" (entity on)
You've got ]]
after style and ends with <path
so there's at least those two copy paste errors
Try this in your browser
test.svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<style>
@keyframes ekas083utsm2_to__to {
0% {
transform: translate(12.002080px, 12.003087px)
}
3.333333% {
transform: translate(12.002080px, 12.003087px)
}
100% {
transform: translate(12.002080px, 12.003087px)
}
}
#ekas083utsm2_tr {
animation: ekas083utsm2_tr__tr 3000ms linear 1 normal forwards
}
@keyframes ekas083utsm2_tr__tr {
0% {
transform: rotate(0deg)
}
3.333333% {
transform: rotate(0deg)
}
13.333333% {
transform: rotate(0deg)
}
40% {
transform: rotate(360deg)
}
100% {
transform: rotate(360deg)
}
}
#ekas083utsm2_ts {
animation: ekas083utsm2_ts__ts 3000ms linear 1 normal forwards
}
@keyframes ekas083utsm2_ts__ts {
0% {
transform: scale(1, 1)
}
3.333333% {
transform: scale(1.100000, 1.100000)
}
6.666667% {
transform: scale(1, 1)
}
10% {
transform: scale(0.900000, 0.900000)
}
13.333333% {
transform: scale(1, 1)
}
43.333333% {
transform: scale(0.900000, 0.900000)
}
46.666667% {
transform: scale(1, 1)
}
100% {
transform: scale(1, 1)
}
}
#ekas083utsm3 {
animation: ekas083utsm3_c_o 3000ms linear 1 normal forwards
}
@keyframes ekas083utsm3_c_o {
0% {
opacity: 0
}
30% {
opacity: 0
}
40% {
opacity: 1
}
100% {
opacity: 1
}
}
#ekas083utsm4 {
animation: ekas083utsm4_c_o 3000ms linear 1 normal forwards
}
@keyframes ekas083utsm4_c_o {
0% {
opacity: 0
}
23.333333% {
opacity: 0
}
33.333333% {
opacity: 1
}
100% {
opacity: 1
}
}
#ekas083utsm5 {
animation: ekas083utsm5_c_o 3000ms linear 1 normal forwards
}
@keyframes ekas083utsm5_c_o {
0% {
opacity: 0
}
16.666667% {
opacity: 0
}
26.666667% {
opacity: 1
}
100% {
opacity: 1
}
}
#ekas083utsm6_ts {
animation: ekas083utsm6_ts__ts 3000ms linear 1 normal forwards
}
@keyframes ekas083utsm6_ts__ts {
0% {
transform: translate(11.999646px, 12.000690px) scale(1, 1)
}
40% {
transform: translate(11.999646px, 12.000690px) scale(1, 1)
}
46.666667% {
transform: translate(11.999646px, 12.000690px) scale(1, 1)
}
100% {
transform: translate(11.999646px, 12.000690px) scale(1, 1)
}
}
#ekas083utsm6 {
animation: ekas083utsm6_c_o 3000ms linear 1 normal forwards
}
@keyframes ekas083utsm6_c_o {
0% {
opacity: 0
}
10% {
opacity: 0
}
20% {
opacity: 1
}
100% {
opacity: 1
}
}
#ekas083utsm7 {
animation: ekas083utsm7_c_o 3000ms linear 1 normal forwards
}
@keyframes ekas083utsm7_c_o {
0% {
opacity: 0
}
13.333333% {
opacity: 1
}
100% {
opacity: 1
}
}
#ekas083utsm8 {
animation: ekas083utsm8_c_o 3000ms linear 1 normal forwards
}
@keyframes ekas083utsm8_c_o {
0% {
opacity: 1
}
13.333333% {
opacity: 0
}
100% {
opacity: 0
}
}
</style>
<g id="ekas083utsm2_to" transform="translate(12.002080,12.003087)">
<g id="ekas083utsm2_tr" transform="rotate(0)">
<g id="ekas083utsm2_ts" transform="scale(1,1)">
<g id="ekas083utsm2" transform="translate(-12.002080,-12.003087)">
<path
id="ekas083utsm3"
d="M6.893152,9.100248C6.263414,8.006358,5.748447,7.098084,5.748782,7.081860C5.749916,7.026952,6.388112,6.335220,6.674968,6.077979C9.847697,3.232804,14.610825,3.359084,17.632808,6.368492C18.002685,6.736830,18.396066,7.222499,18.672990,7.652703L18.872875,7.963224L15.094864,7.984773C11.362080,8.006064,11.312995,8.007411,10.994583,8.097295C9.803582,8.433498,8.868201,9.221373,8.351817,10.323307C8.263881,10.510958,8.169878,10.760037,8.142922,10.876815C8.115966,10.993592,8.081361,11.089138,8.066022,11.089138C8.050682,11.089138,7.522891,10.194137,6.893152,9.100248Z"
opacity="0"
fill="rgb(221,67,55)"
stroke="rgb(221,67,55)"
stroke-width="1"
/>
<path
id="ekas083utsm4"
d="M10.234525,19.764487C9.607878,19.618016,9.101147,19.436064,8.501461,19.142195C6.135889,17.982977,4.522722,15.789555,4.107518,13.167756C4.004330,12.516176,4.014051,11.345112,4.127946,10.706823C4.233548,10.115013,4.379835,9.584985,4.575574,9.084977C4.767152,8.595598,5.047633,8.052760,5.086897,8.095371C5.103856,8.113776,5.876971,9.442340,6.804930,11.047735C8.579143,14.117173,8.702594,14.319894,9.029981,14.701535C9.462846,15.206133,10.277307,15.703486,10.991668,15.899444C11.458071,16.027384,12.506825,16.028442,12.930968,15.901444C13.090041,15.853794,13.222268,15.818184,13.224805,15.822314C13.227305,15.826414,12.704941,16.733427,12.063913,17.837847C10.725013,20.144626,10.931277,19.927391,10.234525,19.764535Z"
opacity="0"
fill="rgb(16,157,88)"
stroke="rgb(16,157,88)"
stroke-width="1"
/>
<path
id="ekas083utsm5"
d="M12.051067,19.965071C13.098824,18.164481,15.418787,14.116804,15.548451,13.863127C16.346433,12.301953,16.102919,10.509909,14.925362,9.277764L14.678059,9.018996L17.039715,9.018996L19.401370,9.018996L19.569476,9.526181C20.065328,11.022197,20.107745,12.531205,19.697201,14.070128C19.058907,16.462773,17.309042,18.443240,15.001705,19.384407C14.218591,19.703841,13.360807,19.897675,12.397911,19.972790C12.188608,19.989120,12.039012,19.985790,12.051067,19.965090Z"
opacity="0"
fill="rgb(255,206,65)"
stroke="rgb(255,206,65)"
stroke-width="1"
/>
<g
id="ekas083utsm6_ts"
transform="translate(11.999646,12.000690) scale(1,1)"
>
<path
id="ekas083utsm6"
d="M11.402172,14.912674C9.798878,14.569035,8.759147,13.006103,9.084853,11.429258C9.333488,10.225541,10.225541,9.333488,11.429258,9.084853C12.608782,8.841216,13.845499,9.372434,14.507297,10.406991C15.143585,11.401669,15.128430,12.655868,14.468117,13.649116C13.802027,14.651059,12.563346,15.161552,11.402169,14.912674Z"
transform="translate(-11.999646,-12.000690)"
opacity="0"
fill="rgb(67,133,246)"
stroke="rgb(67,133,246)"
stroke-width="1"
/>
</g>
<path
id="ekas083utsm7"
d="M11.006332,21.931508C10.013686,21.831177,8.686375,21.463640,7.776911,21.037272C6.712276,20.538158,5.668559,19.791704,4.856070,18.948323C3.464143,17.503471,2.599712,15.854069,2.212682,13.904530C1.560455,10.619152,2.639556,7.179836,5.051678,4.856070C6.421567,3.536360,7.952466,2.703413,9.805650,2.269481C11.054287,1.977106,12.526092,1.948799,13.821724,2.192239C17.279551,2.841939,20.162843,5.279146,21.359206,8.563565C22.148910,10.731568,22.183693,12.958248,21.461717,15.125914C20.949932,16.662501,20.190260,17.890717,19.040489,19.040489C17.890717,20.190260,16.662501,20.949932,15.125914,21.461717C13.799776,21.903409,12.356600,22.067986,11.006332,21.931508ZM12.636403,19.990119C16.197731,19.695068,19.109256,17.136826,19.843950,13.657129C20.134601,12.280534,20.052297,10.822697,19.608436,9.485498L19.439845,8.977593L17.024112,8.977593C15.695458,8.977593,14.608378,8.985253,14.608378,8.994621C14.608378,9.003991,14.709561,9.115287,14.833230,9.241956C15.302594,9.722708,15.677410,10.377922,15.859508,11.035986C15.933318,11.302716,15.948568,11.468854,15.947998,12C15.947382,12.578282,15.936218,12.678185,15.835160,13.010245C15.773480,13.212921,15.661764,13.511021,15.586911,13.672690C15.512061,13.834359,14.674380,15.312707,13.725406,16.957907C12.776433,18.603107,12,19.967848,12,19.990664C12,20.041154,12.020620,20.041134,12.636403,19.990118ZM12.240271,17.630785C12.828748,16.617450,13.297074,15.782874,13.280996,15.776171C13.264916,15.769471,13.105193,15.803261,12.926052,15.851261C11.311668,16.283846,9.585077,15.568676,8.626007,14.070141C8.531276,13.922126,7.711775,12.515465,6.804893,10.944228C5.898011,9.372991,5.131867,8.061132,5.102350,8.028986C5.057439,7.980076,5.007964,8.053276,4.799110,8.477645C3.707515,10.695649,3.712576,13.326809,4.812694,15.539942C5.258217,16.436211,5.712412,17.056272,6.438178,17.759029C7.651723,18.934101,9.039224,19.618000,10.820019,19.918837C10.883149,19.929497,10.934612,19.878207,11.036568,19.703018C11.110128,19.576624,11.651793,18.644119,12.240271,17.630785ZM12.848758,14.896785C13.867437,14.581984,14.583479,13.861300,14.904160,12.828057C15.042387,12.382684,15.042387,11.617316,14.904160,11.171943C14.581043,10.130849,13.869151,9.418957,12.828057,9.095840C12.572884,9.016644,12.425287,8.999466,12,8.999466C11.574713,8.999466,11.427116,9.016644,11.171943,9.095840C10.130849,9.418957,9.418957,10.130849,9.095840,11.171943C8.957613,11.617316,8.957613,12.382684,9.095840,12.828057C9.451275,13.973281,10.339511,14.771454,11.493370,14.982492C11.818305,15.041922,12.523377,14.997332,12.848758,14.896782ZM8.185864,10.892474C8.603029,9.473284,9.767385,8.408029,11.234048,8.103728C11.581449,8.031650,11.855693,8.026380,15.285378,8.025872L18.964083,8.025328L18.866723,7.860668C18.476858,7.201312,17.679025,6.281624,17.056598,5.774076C14.641800,3.804972,11.252567,3.425824,8.460058,4.812396C7.564770,5.256935,6.924625,5.730053,6.203517,6.480158C5.953401,6.740332,5.732438,6.984828,5.712488,7.023483C5.684901,7.076936,5.959928,7.586721,6.861123,9.152569C7.512822,10.284911,8.056271,11.211817,8.068788,11.212360C8.081305,11.212902,8.133989,11.068954,8.185864,10.892474Z"
opacity="0"
fill="rgb(0,0,0)"
stroke="none"
stroke-width="0.041403"
/>
<path></path>
</g>
</g>
</g>
</g>
</svg>
from hass-config.
Thank you for your kind reply matt and please excuse the mess with my code. I have managed to make it work deleting this part of the SVG:
#e3x9d3384qvh3_to {animation: e3x9d3384qvh3_to__to 1400ms linear 1 normal forwards}@keyframes e3x9d3384qvh3_to__to { 0% {transform: translate(12.002080px,12.003087px)} 7.142857% {transform: translate(12.002080px,12.003087px)} 100% {transform: translate(12.002080px,12.003087px)} }
This SVG display the good animation in Chrome:
return '<svg viewBox="0 0 24 24"> <style><![CDATA[#e3x9d3384qvh2 {animation: e3x9d3384qvh2_c_o 1400ms linear 1 normal forwards}@keyframes e3x9d3384qvh2_c_o { 0% {opacity: 0} 21.428571% {opacity: 0} 42.857143% {opacity: 1} 100% {opacity: 1} }#e3x9d3384qvh3_tr {animation: e3x9d3384qvh3_tr__tr 1400ms linear 1 normal forwards}@keyframes e3x9d3384qvh3_tr__tr { 0% {transform: rotate(0deg)} 7.142857% {transform: rotate(0deg)} 28.571429% {transform: rotate(0deg)} 85.714286% {transform: rotate(360deg)} 100% {transform: rotate(360deg)} }#e3x9d3384qvh3_ts {animation: e3x9d3384qvh3_ts__ts 1400ms linear 1 normal forwards}@keyframes e3x9d3384qvh3_ts__ts { 0% {transform: scale(1,1)} 7.142857% {transform: scale(1.100000,1.100000)} 14.285714% {transform: scale(1,1)} 21.428571% {transform: scale(0.900000,0.900000)} 28.571429% {transform: scale(1,1)} 92.857143% {transform: scale(0.900000,0.900000)} 100% {transform: scale(1,1)} }#e3x9d3384qvh4 {animation: e3x9d3384qvh4_c_o 1400ms linear 1 normal forwards}@keyframes e3x9d3384qvh4_c_o { 0% {opacity: 0} 64.285714% {opacity: 0} 85.714286% {opacity: 1} 100% {opacity: 1} }#e3x9d3384qvh5 {animation: e3x9d3384qvh5_c_o 1400ms linear 1 normal forwards}@keyframes e3x9d3384qvh5_c_o { 0% {opacity: 0} 50% {opacity: 0} 71.428571% {opacity: 1} 100% {opacity: 1} }#e3x9d3384qvh6 {animation: e3x9d3384qvh6_c_o 1400ms linear 1 normal forwards}@keyframes e3x9d3384qvh6_c_o { 0% {opacity: 0} 35.714286% {opacity: 0} 57.142857% {opacity: 1} 100% {opacity: 1} }#e3x9d3384qvh7 {animation: e3x9d3384qvh7_c_o 1400ms linear 1 normal forwards}@keyframes e3x9d3384qvh7_c_o { 0% {opacity: 0} 28.571429% {opacity: 1} 100% {opacity: 1} }]]></style>
<path id="e3x9d3384qvh2" d="M11.402172,14.912674C9.798878,14.569035,8.759147,13.006103,9.084853,11.429258C9.333488,10.225541,10.225541,9.333488,11.429258,9.084853C12.608782,8.841216,13.845499,9.372434,14.507297,10.406991C15.143585,11.401669,15.128430,12.655868,14.468117,13.649116C13.802027,14.651059,12.563346,15.161552,11.402169,14.912674Z" opacity="0" fill="rgb(67,133,246)" stroke="rgb(67,133,246)" stroke-width="1"/>
<g id="e3x9d3384qvh3_to" transform="translate(12.002080,12.003087)">
<g id="e3x9d3384qvh3_tr" transform="rotate(0)">
<g id="e3x9d3384qvh3_ts" transform="scale(1,1)">
<g id="e3x9d3384qvh3" transform="translate(-12.002080,-12.003087)">
<path id="e3x9d3384qvh4" d="M6.893152,9.100248C6.263414,8.006358,5.748447,7.098084,5.748782,7.081860C5.749916,7.026952,6.388112,6.335220,6.674968,6.077979C9.847697,3.232804,14.610825,3.359084,17.632808,6.368492C18.002685,6.736830,18.396066,7.222499,18.672990,7.652703L18.872875,7.963224L15.094864,7.984773C11.362080,8.006064,11.312995,8.007411,10.994583,8.097295C9.803582,8.433498,8.868201,9.221373,8.351817,10.323307C8.263881,10.510958,8.169878,10.760037,8.142922,10.876815C8.115966,10.993592,8.081361,11.089138,8.066022,11.089138C8.050682,11.089138,7.522891,10.194137,6.893152,9.100248Z" opacity="0" fill="rgb(221,67,55)" stroke="rgb(221,67,55)" stroke-width="1"/>
<path id="e3x9d3384qvh5" d="M10.234525,19.764487C9.607878,19.618016,9.101147,19.436064,8.501461,19.142195C6.135889,17.982977,4.522722,15.789555,4.107518,13.167756C4.004330,12.516176,4.014051,11.345112,4.127946,10.706823C4.233548,10.115013,4.379835,9.584985,4.575574,9.084977C4.767152,8.595598,5.047633,8.052760,5.086897,8.095371C5.103856,8.113776,5.876971,9.442340,6.804930,11.047735C8.579143,14.117173,8.702594,14.319894,9.029981,14.701535C9.462846,15.206133,10.277307,15.703486,10.991668,15.899444C11.458071,16.027384,12.506825,16.028442,12.930968,15.901444C13.090041,15.853794,13.222268,15.818184,13.224805,15.822314C13.227305,15.826414,12.704941,16.733427,12.063913,17.837847C10.725013,20.144626,10.931277,19.927391,10.234525,19.764535Z" opacity="0" fill="rgb(16,157,88)" stroke="rgb(16,157,88)" stroke-width="1"/>
<path id="e3x9d3384qvh6" d="M12.051067,19.965071C13.098824,18.164481,15.418787,14.116804,15.548451,13.863127C16.346433,12.301953,16.102919,10.509909,14.925362,9.277764L14.678059,9.018996L17.039715,9.018996L19.401370,9.018996L19.569476,9.526181C20.065328,11.022197,20.107745,12.531205,19.697201,14.070128C19.058907,16.462773,17.309042,18.443240,15.001705,19.384407C14.218591,19.703841,13.360807,19.897675,12.397911,19.972790C12.188608,19.989120,12.039012,19.985790,12.051067,19.965090Z" opacity="0" fill="rgb(255,206,65)" stroke="rgb(255,206,65)" stroke-width="1"/>
<path id="e3x9d3384qvh7" d="M11.006332,21.931508C10.013686,21.831177,8.686375,21.463640,7.776911,21.037272C6.712276,20.538158,5.668559,19.791704,4.856070,18.948323C3.464143,17.503471,2.599712,15.854069,2.212682,13.904530C1.560455,10.619152,2.639556,7.179836,5.051678,4.856070C6.421567,3.536360,7.952466,2.703413,9.805650,2.269481C11.054287,1.977106,12.526092,1.948799,13.821724,2.192239C17.279551,2.841939,20.162843,5.279146,21.359206,8.563565C22.148910,10.731568,22.183693,12.958248,21.461717,15.125914C20.949932,16.662501,20.190260,17.890717,19.040489,19.040489C17.890717,20.190260,16.662501,20.949932,15.125914,21.461717C13.799776,21.903409,12.356600,22.067986,11.006332,21.931508ZM12.636403,19.990119C16.197731,19.695068,19.109256,17.136826,19.843950,13.657129C20.134601,12.280534,20.052297,10.822697,19.608436,9.485498L19.439845,8.977593L17.024112,8.977593C15.695458,8.977593,14.608378,8.985253,14.608378,8.994621C14.608378,9.003991,14.709561,9.115287,14.833230,9.241956C15.302594,9.722708,15.677410,10.377922,15.859508,11.035986C15.933318,11.302716,15.948568,11.468854,15.947998,12C15.947382,12.578282,15.936218,12.678185,15.835160,13.010245C15.773480,13.212921,15.661764,13.511021,15.586911,13.672690C15.512061,13.834359,14.674380,15.312707,13.725406,16.957907C12.776433,18.603107,12,19.967848,12,19.990664C12,20.041154,12.020620,20.041134,12.636403,19.990118ZM12.240271,17.630785C12.828748,16.617450,13.297074,15.782874,13.280996,15.776171C13.264916,15.769471,13.105193,15.803261,12.926052,15.851261C11.311668,16.283846,9.585077,15.568676,8.626007,14.070141C8.531276,13.922126,7.711775,12.515465,6.804893,10.944228C5.898011,9.372991,5.131867,8.061132,5.102350,8.028986C5.057439,7.980076,5.007964,8.053276,4.799110,8.477645C3.707515,10.695649,3.712576,13.326809,4.812694,15.539942C5.258217,16.436211,5.712412,17.056272,6.438178,17.759029C7.651723,18.934101,9.039224,19.618000,10.820019,19.918837C10.883149,19.929497,10.934612,19.878207,11.036568,19.703018C11.110128,19.576624,11.651793,18.644119,12.240271,17.630785ZM12.848758,14.896785C13.867437,14.581984,14.583479,13.861300,14.904160,12.828057C15.042387,12.382684,15.042387,11.617316,14.904160,11.171943C14.581043,10.130849,13.869151,9.418957,12.828057,9.095840C12.572884,9.016644,12.425287,8.999466,12,8.999466C11.574713,8.999466,11.427116,9.016644,11.171943,9.095840C10.130849,9.418957,9.418957,10.130849,9.095840,11.171943C8.957613,11.617316,8.957613,12.382684,9.095840,12.828057C9.451275,13.973281,10.339511,14.771454,11.493370,14.982492C11.818305,15.041922,12.523377,14.997332,12.848758,14.896782ZM8.185864,10.892474C8.603029,9.473284,9.767385,8.408029,11.234048,8.103728C11.581449,8.031650,11.855693,8.026380,15.285378,8.025872L18.964083,8.025328L18.866723,7.860668C18.476858,7.201312,17.679025,6.281624,17.056598,5.774076C14.641800,3.804972,11.252567,3.425824,8.460058,4.812396C7.564770,5.256935,6.924625,5.730053,6.203517,6.480158C5.953401,6.740332,5.732438,6.984828,5.712488,7.023483C5.684901,7.076936,5.959928,7.586721,6.861123,9.152569C7.512822,10.284911,8.056271,11.211817,8.068788,11.212360C8.081305,11.212902,8.133989,11.068954,8.185864,10.892474Z" opacity="0" fill="rgb(0,0,0)" stroke="none" stroke-width="0.041403"60C8.081305,11.212902,8.133989,11.068954,8.185864,10.892474Z" fill="rgb(186,192,198)" stroke="none" stroke-width="0.041403"/></g></g></g></g></svg>'; }
I still don't understand why the piece of code i have delete was causing the problem.
Thank you for your support.
from hass-config.
Fixed with last chrome
update.
from hass-config.
Related Issues (20)
- template yaml HOT 1
- There are adjustments about the button card lock HOT 3
- Restarting after update to yaml HOT 2
- Wallpanel Full Screen HOT 2
- 2023.7 workaround HOT 2
- Alarm Card HOT 1
- Can't edit the dashboard cards. HOT 4
- Popup is transparent on iPad HOT 1
- Why does a broken icon appear when I toggle a button? HOT 1
- Manually copy over these files from matt8707/hass-config HOT 1
- Missing blur overlay on media, button card with chrome browser
- Showing Camera in Sidebar? HOT 4
- Missing Background (just had it on Chrome)
- Vacuum More Info (whack-a-mole needed) HOT 9
- Custom element doesn't exist: grid-layout. HOT 1
- Youtube watching sensor not working anymore
- Dashboard Home Assistant
- how to use LG WebOs on media slider
- No Background Image
- wrong post sry
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hass-config.