Code Monkey home page Code Monkey logo

Comments (3)

matt8707 avatar matt8707 commented on May 18, 2024

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.

romquenin avatar romquenin commented on May 18, 2024

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.

romquenin avatar romquenin commented on May 18, 2024

Fixed with last chrome update.

from hass-config.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.