过渡不适用于SVG

Question

我正在尝试为SVG设置动画，我希望SVG中的线标签在我将鼠标悬停在SVG上时能够顺利显示。我已经将CSS过渡应用于它，但它无效。

这是我的例子：https://codepen.io/Ali_Farooq_/pen/WoaRMV?editors=1100

我是动画SVG的新手，我认为有一些我不知道的错误。任何建议或提示将不胜感激。

这是我的代码

<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 230.8 181.7" style="enable-background:new 0 0 230.8 181.7;">
  <circle id="XMLID_1_" class="circle" cx="115.4" cy="90.9" r="86.9"/>
  <rect id="XMLID_2_" x="100.6" y="20.9" class="rectangle" width="29.6" height="107.2"/>
  <polygon id="XMLID_3_" class="polygon" points="136.6,128.1 115.1,165.4 93.6,128.1 "/>
  <line id="XMLID_4_" class="lines line1" y1="40.6" x2="230.8" y2="40.6"/>
  <line id="XMLID_5_" class="lines line2" y1="133.6" x2="230.8" y2="133.6"/>
  <g id="XMLID_6_">
    <path id="XMLID_10_" d="M20.5,79.7V54.1h7.2c2.2,0,4.2,0.5,5.9,1.5s3,2.4,4,4.2s1.4,3.9,1.4,6.3v1.6c0,2.4-0.5,4.5-1.4,6.3
        s-2.3,3.2-4,4.2s-3.7,1.5-6,1.5H20.5z M23.9,56.9V77h3.6c2.6,0,4.6-0.8,6.1-2.4s2.2-3.9,2.2-6.9v-1.5c0-2.9-0.7-5.2-2-6.8
        c-1.4-1.6-3.3-2.4-5.8-2.5H23.9z"/>
    <path id="XMLID_13_" d="M63.8,67.7c0,2.5-0.4,4.7-1.3,6.6s-2,3.3-3.6,4.3s-3.4,1.5-5.4,1.5c-2,0-3.8-0.5-5.4-1.5s-2.8-2.4-3.6-4.2
        s-1.3-4-1.3-6.4v-1.8c0-2.5,0.4-4.6,1.3-6.5s2.1-3.3,3.6-4.3s3.4-1.5,5.4-1.5c2.1,0,3.9,0.5,5.4,1.5s2.8,2.4,3.6,4.3
        s1.3,4.1,1.3,6.6V67.7z M60.5,66.1c0-3-0.6-5.4-1.8-7s-2.9-2.4-5.1-2.4c-2.1,0-3.8,0.8-5,2.4s-1.9,3.9-1.9,6.8v1.9
        c0,2.9,0.6,5.3,1.9,6.9s2.9,2.5,5.1,2.5c2.2,0,3.9-0.8,5.1-2.4s1.8-3.9,1.8-6.8V66.1z"/>
    <path id="XMLID_17_" d="M74.4,71.6l0.5,3.4l0.7-3l5.1-17.9h2.8L88.5,72l0.7,3.1l0.5-3.4l4-17.5h3.4l-6.2,25.6h-3.1l-5.3-18.7
        l-0.4-2l-0.4,2l-5.5,18.7h-3.1L67,54.1h3.4L74.4,71.6z"/>
    <path id="XMLID_19_" d="M120.5,79.7h-3.4L104.2,60v19.7h-3.4V54.1h3.4l12.9,19.8V54.1h3.4V79.7z"/>
    <path id="XMLID_21_" d="M129.9,77H142v2.8h-15.5V54.1h3.4V77z"/>
    <path id="XMLID_23_" d="M164.4,67.7c0,2.5-0.4,4.7-1.3,6.6s-2,3.3-3.6,4.3s-3.4,1.5-5.4,1.5c-2,0-3.8-0.5-5.4-1.5s-2.8-2.4-3.6-4.2
        s-1.3-4-1.3-6.4v-1.8c0-2.5,0.4-4.6,1.3-6.5s2.1-3.3,3.6-4.3s3.4-1.5,5.4-1.5c2.1,0,3.9,0.5,5.4,1.5s2.8,2.4,3.6,4.3
        s1.3,4.1,1.3,6.6V67.7z M161,66.1c0-3-0.6-5.4-1.8-7s-2.9-2.4-5.1-2.4c-2.1,0-3.8,0.8-5,2.4s-1.9,3.9-1.9,6.8v1.9
        c0,2.9,0.6,5.3,1.9,6.9s2.9,2.5,5.1,2.5c2.2,0,3.9-0.8,5.1-2.4S161,71,161,68V66.1z"/>
    <path id="XMLID_26_" d="M183.2,73h-10.7l-2.4,6.7h-3.5l9.8-25.6h3l9.8,25.6h-3.5L183.2,73z M173.5,70.3h8.7l-4.4-12L173.5,70.3z"/>
    <path id="XMLID_29_" d="M192.6,79.7V54.1h7.2c2.2,0,4.2,0.5,5.9,1.5s3,2.4,4,4.2s1.4,3.9,1.4,6.3v1.6c0,2.4-0.5,4.5-1.4,6.3
        s-2.3,3.2-4,4.2s-3.7,1.5-6,1.5H192.6z M196,56.9V77h3.6c2.6,0,4.6-0.8,6.1-2.4s2.2-3.9,2.2-6.9v-1.5c0-2.9-0.7-5.2-2-6.8
        c-1.4-1.6-3.3-2.4-5.8-2.5H196z"/>
  </g>
  <g id="XMLID_8_">
    <path id="XMLID_36_" d="M88.2,107.9h-5.8V118h-3.3V93.1h8.2c2.8,0,5,0.6,6.5,1.9c1.5,1.3,2.3,3.1,2.3,5.6c0,1.5-0.4,2.9-1.3,4
        c-0.8,1.2-2,2-3.5,2.6l5.8,10.6v0.2h-3.5L88.2,107.9z M82.4,105.2h5c1.6,0,2.9-0.4,3.9-1.3c1-0.8,1.4-2,1.4-3.4
        c0-1.5-0.5-2.7-1.4-3.5s-2.2-1.2-4-1.3h-5V105.2z"/>
    <path id="XMLID_39_" d="M114.7,106.5h-10.8v8.8h12.5v2.7h-15.8V93.1h15.6v2.7h-12.4v8h10.8V106.5z"/>
    <path id="XMLID_41_" d="M127.8,106.9c-2.8-0.8-4.9-1.8-6.1-3c-1.3-1.2-1.9-2.6-1.9-4.4c0-2,0.8-3.6,2.3-4.9
        c1.6-1.3,3.6-1.9,6.1-1.9c1.7,0,3.2,0.3,4.6,1c1.3,0.7,2.4,1.6,3.1,2.7c0.7,1.2,1.1,2.4,1.1,3.8h-3.3c0-1.5-0.5-2.7-1.4-3.6
        s-2.3-1.3-4-1.3c-1.6,0-2.9,0.4-3.8,1.1c-0.9,0.7-1.4,1.7-1.4,3c0,1,0.4,1.9,1.3,2.6c0.9,0.7,2.3,1.3,4.4,1.9
        c2.1,0.6,3.7,1.2,4.9,1.9c1.2,0.7,2,1.5,2.6,2.5c0.6,0.9,0.8,2,0.8,3.3c0,2-0.8,3.6-2.4,4.8c-1.6,1.2-3.7,1.8-6.3,1.8
        c-1.7,0-3.3-0.3-4.8-1c-1.5-0.7-2.6-1.6-3.4-2.7c-0.8-1.1-1.2-2.4-1.2-3.9h3.3c0,1.5,0.6,2.7,1.7,3.6c1.1,0.9,2.6,1.3,4.5,1.3
        c1.7,0,3.1-0.4,4-1.1c0.9-0.7,1.4-1.7,1.4-2.9c0-1.2-0.4-2.2-1.3-2.8S130.1,107.5,127.8,106.9z"/>
    <path id="XMLID_43_" d="M158.8,93.1V110c0,2.3-0.7,4.3-2.2,5.8c-1.5,1.5-3.5,2.3-6,2.5l-0.9,0c-2.7,0-4.9-0.7-6.5-2.2
        c-1.6-1.5-2.4-3.5-2.5-6.1v-17h3.2v16.9c0,1.8,0.5,3.2,1.5,4.2c1,1,2.4,1.5,4.2,1.5c1.9,0,3.3-0.5,4.3-1.5c1-1,1.5-2.4,1.5-4.2
        V93.1H158.8z"/>
    <path id="XMLID_45_" d="M168.2,93.1l8.1,20.3l8.1-20.3h4.3V118h-3.3v-9.7l0.3-10.5l-8.2,20.1h-2.5l-8.2-20.1l0.3,10.4v9.7H164V93.1
        H168.2z"/>
    <path id="XMLID_47_" d="M208.6,106.5h-10.8v8.8h12.5v2.7h-15.8V93.1h15.6v2.7h-12.4v8h10.8V106.5z"/>
  </g>
  <g id="XMLID_7_">
    <path id="XMLID_32_" d="M24.9,93.2l8.1,20.3l8.1-20.3h4.3V118h-3.3v-9.7l0.3-10.5L34.3,118h-2.5l-8.2-20.1l0.3,10.4v9.7h-3.3V93.2
        H24.9z"/>
    <path id="XMLID_34_" d="M58.4,105.7l6.5-12.5h3.7L60,108.8v9.3h-3.3v-9.3l-8.6-15.6h3.8L58.4,105.7z"/>
  </g>
</svg>

和我的CSS

.circle {
  fill: none;
  stroke: #767270;
  stroke-width: 8;
  stroke-miterlimit: 10;
}

.rectangle {
  fill: #767270;
  stroke: #767270;
  stroke-width: 5;
  stroke-miterlimit: 10;
}

.polygon {
  fill: #767270;
  stroke: #767270;
  stroke-width: 5;
  stroke-miterlimit: 10;
}

.lines{
  fill: none;
  stroke: #46677f;
  stroke-width: 3;
  stroke-miterlimit: 10;
  stroke-dasharray: 235;
  stroke-dashoffset: 235;
  tranistion: stroke-dashoffset 5s linear;
}

svg:hover .lines {
  stroke-dashoffset: 0;
}

#XMLID_6_ {
  fill: #46677f;
}

#XMLID_8_ {
  fill: #46677f;
}

#XMLID_7_ {
  fill: #46677f;
}

@keyframes linesGrowth {
  from {
    stroke-dashoffset: -235;
  } to {
    stroke-dashoffset: 0;
  }
}