Почему смена заливки букв происходит не плавно?

246
15 июня 2018, 14:50

При наведении на SVG-элемент заливка меняется не плавно, хотя я прописал для класса с буквами transition, с чем это связано и как можно исправить?

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
.cls-1 { 
  font-size: 28px; 
  fill: none; 
  stroke: #1d1d1b; 
  stroke-width: 0.5px; 
  font-family: PFDinDisplayPro-Black, PF DinDisplay Pro; 
  letter-spacing: -0.07em; 
} 
 
.cls-2 { 
  letter-spacing: -0.18em; 
} 
 
.cls-3 { 
  letter-spacing: -0.16em; 
} 
 
.cls-4 { 
  letter-spacing: -0.17em; 
} 
 
.cls-5 { 
  letter-spacing: -0.13em; 
} 
 
.cls-6 { 
  letter-spacing: -0.09em; 
} 
 
.cls-7 { 
  letter-spacing: -0.08em; 
} 
 
.cls-8 { 
  letter-spacing: -0.13em; 
} 
 
.cls-9 { 
  letter-spacing: -0.11em; 
} 
 
.cls-10 { 
  letter-spacing: -0.1em; 
} 
 
svg:hover .letter { 
  fill: black; 
} 
 
.letter { 
  transition: .3s; 
}
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480.37 595.28"> 
  <g id="Слой_17_копия_" data-name="Слой 17 (копия)"> 
    <text class="cls-1" transform="translate(18.85 274.91)">THE CHAIR HAS BEEN USED SINCE IEKC</text> 
  </g> 
  <g id="Слой_16_копия_" data-name="Слой 16 (копия)"> 
    <text class="cls-1" transform="translate(18.85 296.76)">ANTIQUIT 
      <tspan class="letter cls-2" x="106.88" y="0">Y</tspan> 
      <tspan x="118.61" y="0">, A</tspan> 
      <tspan class="letter cls-3" x="147.56" y="0">L</tspan> 
      <tspan x="158.53" y="0">THOUGH FOR MANY EFW</tspan> 
    </text> 
  </g> 
  <g id="Слой_15_копия_" data-name="Слой 15 (копия)"> 
    <text class="cls-1" transform="translate(18.85 317.63)">CENTURIES IT WAS A SYMBOLIC 
      <tspan class="letter cls-4" x="366.01" y="0">F</tspan> 
      <tspan x="376.76" y="0">JEJ3</tspan> 
    </text> 
  </g> 
  <g id="Слой_14_копия_" data-name="Слой 14 (копия)"> 
    <text class="cls-1" transform="translate(18.85 340.84)">ARTICLE OF S 
      <tspan class="letter cls-5" x="150.13" y="0">TA</tspan> 
      <tspan x="176.26" y="0">TE AND DIGNITY OF THE</tspan> 
    </text> 
  </g> 
  <g id="Слой_13_копия_" data-name="Слой 13 (копия)"> 
    <text class="cls-1" transform="translate(18.85 362.34)">ORDINA 
      <tspan class="letter cls-6" x="88" y="0">R</tspan> 
      <tspan x="102.51" y="0">Y USE. &quot;THE CHAIR&quot; IS STILL P</tspan> 
    </text> 
  </g> 
  <g id="Слой_12_копия_" data-name="Слой 12 (копия)"> 
    <text class="cls-1" transform="translate(18.85 383.73)">R 
      <tspan class="letter cls-5" x="15.06" y="0">A</tspan> 
      <tspan x="29.96" y="0" xml:space="preserve">THER THAN AN ARTICLE FOR ONE A</tspan> 
    </text> 
  </g> 
  <g id="Слой_11_копия_" data-name="Слой 11 (копия)"> 
    <text class="cls-1" transform="translate(18.85 405.02)">USED AS THE EMBLEM OF AUTHORITY</text> 
  </g> 
  <g id="Слой_10_копия_" data-name="Слой 10 (копия)"> 
    <text class="cls-1" transform="translate(18.85 426.69)"> 
      <tspan xml:space="preserve">IN THE HOUSE OF COMMONS IN THE IS</tspan> 
    </text> 
  </g> 
  <g id="Слой_9_копия_" data-name="Слой 9 (копия)"> 
    <text class="cls-1" transform="translate(18.85 448.93)">UNITED KINGDOM AND CANADA, AND</text> 
  </g> 
  <g id="Слой_8_копия_" data-name="Слой 8 (копия)"> 
    <text class="cls-1" transform="translate(18.85 469.62)">IN MANY 
      <tspan class="letter cls-7" x="104.89" y="0">O</tspan> 
      <tspan x="120.93" y="0">THER SETTINGS. IN KEEPING</tspan> 
    </text> 
  </g> 
  <g id="Слой_6_копия_" data-name="Слой 6 (копия)"> 
    <text class="cls-1" transform="translate(18.85 491.86)">WITH THIS HIS 
      <tspan class="letter cls-6" x="162.82" y="0">T</tspan> 
      <tspan x="175.17" y="0">ORICAL CONN</tspan> 
      <tspan class="letter cls-7" x="328.88" y="0">O</tspan> 
      <tspan class="letter cls-8" x="344.93" y="0">TA</tspan> 
      <tspan x="371.05" y="0">TION</tspan> 
    </text> 
  </g> 
  <g id="Слой_5_копия_" data-name="Слой 5 (копия)"> 
    <text class="cls-1" transform="translate(18.85 513.3)"> 
      <tspan xml:space="preserve">OF THE &quot;CHAIR&quot; AS THE SYMBOL OF IS </tspan> 
    </text> 
  </g> 
  <g id="Слой_4_копия_" data-name="Слой 4 (копия)"> 
    <text class="cls-1" transform="translate(18.85 534.78)">AUTHORIT 
      <tspan class="letter cls-2" x="114.04" y="0">Y</tspan> 
      <tspan x="125.78" y="0">, COMMITTEES, BOARDS OF</tspan> 
    </text> 
  </g> 
  <g id="Слой_3_копия_" data-name="Слой 3 (копия)"> 
    <text class="cls-1" transform="translate(18.85 555.76)">DIREC 
      <tspan class="letter cls-6" x="66.47" y="0">T</tspan> 
      <tspan x="78.82" y="0" xml:space="preserve">ORS, AND ACADEMIC TRE</tspan> 
      <tspan class="letter cls-8" x="365.96" y="0">A</tspan> 
      <tspan x="380.85" y="0">TBE</tspan> 
    </text> 
  </g> 
  <g id="Слой_2_копия_" data-name="Слой 2 (копия)"> 
    <text class="cls-1" transform="translate(18.85 577.71)">DE 
      <tspan class="letter cls-9" x="30.07" y="0">P</tspan> 
      <tspan x="43.51" y="0">ARTMENTS ALL H</tspan> 
      <tspan class="letter cls-10" x="240.16" y="0">A</tspan> 
      <tspan x="255.89" y="0">VE A CHANCE A</tspan> 
    </text> 
  </g> 
</svg>

Answer 1

Поменяйте fill: none на fill: transparent. Ситуация похожа с display: noneв display: block:

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
.cls-1 { 
  font-size: 28px; 
  fill: transparent; 
  stroke: #1d1d1b; 
  stroke-width: 0.5px; 
  letter-spacing: -0.07em; 
} 
 
.cls-2 { 
  letter-spacing: -0.18em; 
} 
 
.cls-3 { 
  letter-spacing: -0.16em; 
} 
 
.cls-4 { 
  letter-spacing: -0.17em; 
} 
 
.cls-5 { 
  letter-spacing: -0.13em; 
} 
 
.cls-6 { 
  letter-spacing: -0.09em; 
} 
 
.cls-7 { 
  letter-spacing: -0.08em; 
} 
 
.cls-8 { 
  letter-spacing: -0.13em; 
} 
 
.cls-9 { 
  letter-spacing: -0.11em; 
} 
 
.cls-10 { 
  letter-spacing: -0.1em; 
} 
 
svg:hover .letter { 
  fill: black; 
} 
 
.letter { 
  transition: .3s; 
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="10 250 480 595"> 
  <g id="Слой_17_копия_" data-name="Слой 17 (копия)"> 
    <text class="cls-1" transform="translate(18.85 274.91)">THE CHAIR HAS BEEN USED SINCE IEKC</text> 
  </g> 
  <g id="Слой_16_копия_" data-name="Слой 16 (копия)"> 
    <text class="cls-1" transform="translate(18.85 296.76)">ANTIQUIT 
      <tspan class="letter cls-2" x="106.88" y="0">Y</tspan> 
      <tspan x="118.61" y="0">, A</tspan> 
      <tspan class="letter cls-3" x="147.56" y="0">L</tspan> 
      <tspan x="158.53" y="0">THOUGH FOR MANY EFW</tspan> 
    </text> 
  </g> 
  <g id="Слой_15_копия_" data-name="Слой 15 (копия)"> 
    <text class="cls-1" transform="translate(18.85 317.63)">CENTURIES IT WAS A SYMBOLIC 
      <tspan class="letter cls-4" x="366.01" y="0">F</tspan> 
      <tspan x="376.76" y="0">JEJ3</tspan> 
    </text> 
  </g> 
  <g id="Слой_14_копия_" data-name="Слой 14 (копия)"> 
    <text class="cls-1" transform="translate(18.85 340.84)">ARTICLE OF S 
      <tspan class="letter cls-5" x="150.13" y="0">TA</tspan> 
      <tspan x="176.26" y="0">TE AND DIGNITY OF THE</tspan> 
    </text> 
  </g> 
  <g id="Слой_13_копия_" data-name="Слой 13 (копия)"> 
    <text class="cls-1" transform="translate(18.85 362.34)">ORDINA 
      <tspan class="letter cls-6" x="88" y="0">R</tspan> 
      <tspan x="102.51" y="0">Y USE. &quot;THE CHAIR&quot; IS STILL P</tspan> 
    </text> 
  </g> 
  <g id="Слой_12_копия_" data-name="Слой 12 (копия)"> 
    <text class="cls-1" transform="translate(18.85 383.73)">R 
      <tspan class="letter cls-5" x="15.06" y="0">A</tspan> 
      <tspan x="29.96" y="0" xml:space="preserve">THER THAN AN ARTICLE FOR ONE A</tspan> 
    </text> 
  </g> 
  <g id="Слой_11_копия_" data-name="Слой 11 (копия)"> 
    <text class="cls-1" transform="translate(18.85 405.02)">USED AS THE EMBLEM OF AUTHORITY</text> 
  </g> 
  <g id="Слой_10_копия_" data-name="Слой 10 (копия)"> 
    <text class="cls-1" transform="translate(18.85 426.69)"> 
      <tspan xml:space="preserve">IN THE HOUSE OF COMMONS IN THE IS</tspan> 
    </text> 
  </g> 
  <g id="Слой_9_копия_" data-name="Слой 9 (копия)"> 
    <text class="cls-1" transform="translate(18.85 448.93)">UNITED KINGDOM AND CANADA, AND</text> 
  </g> 
  <g id="Слой_8_копия_" data-name="Слой 8 (копия)"> 
    <text class="cls-1" transform="translate(18.85 469.62)">IN MANY 
      <tspan class="letter cls-7" x="104.89" y="0">O</tspan> 
      <tspan x="120.93" y="0">THER SETTINGS. IN KEEPING</tspan> 
    </text> 
  </g> 
  <g id="Слой_6_копия_" data-name="Слой 6 (копия)"> 
    <text class="cls-1" transform="translate(18.85 491.86)">WITH THIS HIS 
      <tspan class="letter cls-6" x="162.82" y="0">T</tspan> 
      <tspan x="175.17" y="0">ORICAL CONN</tspan> 
      <tspan class="letter cls-7" x="328.88" y="0">O</tspan> 
      <tspan class="letter cls-8" x="344.93" y="0">TA</tspan> 
      <tspan x="371.05" y="0">TION</tspan> 
    </text> 
  </g> 
  <g id="Слой_5_копия_" data-name="Слой 5 (копия)"> 
    <text class="cls-1" transform="translate(18.85 513.3)"> 
      <tspan xml:space="preserve">OF THE &quot;CHAIR&quot; AS THE SYMBOL OF IS </tspan> 
    </text> 
  </g> 
  <g id="Слой_4_копия_" data-name="Слой 4 (копия)"> 
    <text class="cls-1" transform="translate(18.85 534.78)">AUTHORIT 
      <tspan class="letter cls-2" x="114.04" y="0">Y</tspan> 
      <tspan x="125.78" y="0">, COMMITTEES, BOARDS OF</tspan> 
    </text> 
  </g> 
  <g id="Слой_3_копия_" data-name="Слой 3 (копия)"> 
    <text class="cls-1" transform="translate(18.85 555.76)">DIREC 
      <tspan class="letter cls-6" x="66.47" y="0">T</tspan> 
      <tspan x="78.82" y="0" xml:space="preserve">ORS, AND ACADEMIC TRE</tspan> 
      <tspan class="letter cls-8" x="365.96" y="0">A</tspan> 
      <tspan x="380.85" y="0">TBE</tspan> 
    </text> 
  </g> 
  <g id="Слой_2_копия_" data-name="Слой 2 (копия)"> 
    <text class="cls-1" transform="translate(18.85 577.71)">DE 
      <tspan class="letter cls-9" x="30.07" y="0">P</tspan> 
      <tspan x="43.51" y="0">ARTMENTS ALL H</tspan> 
      <tspan class="letter cls-10" x="240.16" y="0">A</tspan> 
      <tspan x="255.89" y="0">VE A CHANCE A</tspan> 
    </text> 
  </g> 
</svg>

READ ALSO
Выделять блок, если &ldquo;доскроллил&rdquo; до него

Выделять блок, если “доскроллил” до него

Есть к примеру в тексте заголовки <h1> и есть справа блок, в котором создаются ссылки с названием этих заголовков

236
Иерархия массива

Иерархия массива

Можно ли воссоздать иерархию в массиве? К примеру такую:

228