SVG изменить цвет и добавить :hover

267
02 ноября 2018, 23:40

Помогите, пожалуйста, изменить цвет SVG и сделать так, что бы на hover цвет менялся. Css изменить не получается, или это только прописать на JS возможно? HTML:

<object class="svgClass" type="image/svg+xml" data="img/viaduk_1.svg"></object>

SVG:

    <svg id="svgInternalID" data-name="Шар 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><defs><style>.cls-1{fill:#8fab8b;opacity:0;}.cls-2,.cls-5{fill:#fff;}.cls-2,.cls-3,.cls-5{stroke:#3a7131;stroke-miterlimit:10;}.cls-2,.cls-3{stroke-width:3px;}.cls-3{fill:none;}.cls-4{fill:#3a7131;}.cls-5{stroke-width:4px;}</style></defs><title>viaduk</title><rect class="cls-1" x="-2.68" y="-2.49" width="200" height="200"/><path class="cls-2" d="M162.8,90.91a2.56,2.56,0,0,0-2-3.81h0a3.23,3.23,0,0,0-3.14,2.07c-.17.33-3.9,7.21-4.23,7.45-1.32.75-9.77-5.54-12.5-6.54-.09,0-.25-.08-.33-.08l-17.06-1.49-.34,5c-.49,4-3.14,4.39-3.14,4.39l-1,7.95s7.62,2.32,10.11,3.47,9.6,5.64,9.6,5.64l2.07-14.66c2.49-1.16,11.76,3.31,13.92,3.14.74-.08,1.65-1.32,1.65-1.32Z"/><path class="cls-2" d="M134.15,71.2c-4.39-.5-8.45,2.65-9.69,7.29a1.23,1.23,0,0,0,1.07,1.65l14.74,1.66a1.42,1.42,0,0,0,1.5-1.41C141.68,75.67,138.54,71.7,134.15,71.2Z"/><path class="cls-2" d="M131.83,89.34c4.06.49,7.87-2.9,8.44-7.46l-14.74-1.65C125,84.78,127.77,88.92,131.83,89.34Z"/><line class="cls-3" x1="130.83" y1="96.95" x2="129.01" y2="110.29"/><path class="cls-2" d="M126.94,88.76s.42,7.37,3.89,7.78c3.81.41,5.72-6.71,5.72-6.71"/><path class="cls-2" d="M120.07,97.78s1.9.25,2.81-2.4a45.6,45.6,0,0,0,.67-7c-4-.41-12.26,2.74-15.08,3.9a2.33,2.33,0,0,0-1.4,1.41l-4,11.51,5.38-.17,2.74-7a1.49,1.49,0,0,1,1-1C113.77,96.38,118.41,95.3,120.07,97.78Z"/><path class="cls-2" d="M139.86,90.25s-1.24,5.21-1.16,6.87c.17,2.73,2.07,3,2.07,3"/><path class="cls-2" d="M169.84,79l13.83-4.8a2,2,0,0,1,2.57,1.24l2.65,7.79a2,2,0,0,1-1.24,2.56L173.9,90.5a1.66,1.66,0,0,1-1.24,0l-7-2.16a2,2,0,0,1-1-3.14l4.22-5.55A2,2,0,0,1,169.84,79Z"/><line class="cls-3" x1="111.79" y1="105.57" x2="164.46" y2="87.35"/><path class="cls-2" d="M59,68.8c4.47-.5,8.7,2.73,10,7.53A1.31,1.31,0,0,1,68,78.07L52.82,79.81a1.37,1.37,0,0,1-1.49-1.41C51.33,73.35,54.56,69.29,59,68.8Z"/><path class="cls-2" d="M73.44,96s-2.73-.33-3.23-4.47l-.33-5.13L52.41,88c-.17,0-.25.08-.33.08-2.65.91-9.61,6-11.85,8a2.21,2.21,0,0,0-.58.91l-3.56,10.18a2.57,2.57,0,0,0,1.49,3.15h0a2.5,2.5,0,0,0,3.23-1.49l3.4-8.94c2.57-2.16,4.72-3.9,8.11-1.49l2.16,15s7.62-2.49,10.1-3.65S75.18,108,75.18,108Z"/><path class="cls-2" d="M61.43,87.35c-4.22.5-8.11-3-8.69-7.62L67.89,78C68.47,82.71,65.57,86.93,61.43,87.35Z"/><line class="cls-3" x1="62.43" y1="95.22" x2="64.33" y2="108.88"/><path class="cls-2" d="M66.4,86.77s-.41,7.53-4,8c-4,.41-5.88-6.87-5.88-6.87"/><path class="cls-2" d="M73.44,96s-2,.25-2.9-2.48c-.58-1.66-.66-7.12-.66-7.12,4.06-.42,12.51,2.81,15.49,4a2.53,2.53,0,0,1,1.41,1.49l4,11.85-5.54-.25.08-5a1.83,1.83,0,0,0-1-1.08C82.88,96.79,76.51,91.16,73.44,96Z"/><path class="cls-2" d="M53.15,88.34s1.24,5.39,1.16,7c-.16,2.82-2.15,3.07-2.15,3.07"/><path class="cls-2" d="M23.84,118,9.51,121.05a2,2,0,0,1-2.4-1.57l-1.74-8a2,2,0,0,1,1.57-2.4L21.19,106a1.66,1.66,0,0,1,1.24.17l6.62,3a2.06,2.06,0,0,1,.67,3.23l-4.89,5A2.38,2.38,0,0,1,23.84,118Z"/><line class="cls-3" x1="84.62" y1="98.69" x2="30.13" y2="110.37"/><path class="cls-2" d="M44.87,62.83H28.47a2.22,2.22,0,0,1-2.23-2.23V51.41a2.22,2.22,0,0,1,2.23-2.24H44.79a2.32,2.32,0,0,1,1.32.41l6.55,4.81a2.28,2.28,0,0,1-.09,3.72L46.11,62.5A3.32,3.32,0,0,1,44.87,62.83Z"/><path class="cls-2" d="M143.5,62.83h16.4a2.23,2.23,0,0,0,2.24-2.23V51.41a2.23,2.23,0,0,0-2.24-2.24H143.59a2.36,2.36,0,0,0-1.33.41l-6.54,4.81a2.28,2.28,0,0,0,.08,3.72l6.46,4.39A3,3,0,0,0,143.5,62.83Z"/><line class="cls-3" x1="53.57" y1="55.96" x2="134.73" y2="55.96"/><path class="cls-4" d="M114.19,129.34a1.59,1.59,0,0,1,1.49,2,12,12,0,0,1-22.86,0,1.52,1.52,0,0,1,1.49-2h0a1.42,1.42,0,0,1,1.41,1.07,8.91,8.91,0,0,0,8.53,6.21,9,9,0,0,0,8.53-6.21,1.52,1.52,0,0,1,1.41-1.07Z"/><path class="cls-4" d="M134.15,129.34a1.59,1.59,0,0,1,1.49,2,12,12,0,0,1-22.86,0,1.51,1.51,0,0,1,1.49-2h0a1.42,1.42,0,0,1,1.41,1.07,8.91,8.91,0,0,0,8.53,6.21,9,9,0,0,0,8.53-6.21,1.5,1.5,0,0,1,1.41-1.07Z"/><path class="cls-4" d="M154.19,129.34a1.59,1.59,0,0,1,1.49,2,12,12,0,0,1-22.86,0,1.52,1.52,0,0,1,1.49-2h0a1.42,1.42,0,0,1,1.41,1.07,8.91,8.91,0,0,0,8.53,6.21,9,9,0,0,0,8.53-6.21,1.52,1.52,0,0,1,1.41-1.07Z"/><path class="cls-4" d="M174.15,129.34a1.59,1.59,0,0,1,1.49,2,12,12,0,0,1-22.86,0,1.51,1.51,0,0,1,1.49-2h0a1.42,1.42,0,0,1,1.41,1.07,8.91,8.91,0,0,0,8.53,6.21,9,9,0,0,0,8.53-6.21,1.5,1.5,0,0,1,1.41-1.07Z"/><path class="cls-4" d="M34.19,129.34a1.59,1.59,0,0,1,1.49,2,12,12,0,0,1-22.86,0,1.52,1.52,0,0,1,1.49-2h0a1.42,1.42,0,0,1,1.41,1.07,8.91,8.91,0,0,0,8.53,6.21,9,9,0,0,0,8.53-6.21,1.52,1.52,0,0,1,1.41-1.07Z"/><path class="cls-4" d="M54.23,129.34a1.59,1.59,0,0,1,1.49,2,12,12,0,0,1-22.86,0,1.52,1.52,0,0,1,1.49-2h0a1.41,1.41,0,0,1,1.41,1.07,8.92,8.92,0,0,0,8.53,6.21,9,9,0,0,0,8.53-6.21,1.52,1.52,0,0,1,1.41-1.07Z"/><path class="cls-4" d="M74.19,129.34a1.59,1.59,0,0,1,1.49,2,12,12,0,0,1-22.86,0,1.52,1.52,0,0,1,1.49-2h0a1.42,1.42,0,0,1,1.41,1.07,8.91,8.91,0,0,0,8.53,6.21,9,9,0,0,0,8.53-6.21,1.52,1.52,0,0,1,1.41-1.07Z"/><path class="cls-4" d="M94.15,129.34a1.59,1.59,0,0,1,1.49,2,12,12,0,0,1-22.86,0,1.51,1.51,0,0,1,1.49-2h0a1.42,1.42,0,0,1,1.41,1.07,8.91,8.91,0,0,0,8.53,6.21,9,9,0,0,0,8.53-6.21,1.5,1.5,0,0,1,1.41-1.07Z"/><path class="cls-5" d="M35.1,130.58c-1.24.41-2.57-.42-2.32-1.49,2.82-15.82,66.5-26.09,76.52-24.18,38.18,7.45,41.91,22,24.43,26a4.35,4.35,0,0,1-4.14-1.24c-3.31-3.9-12-13-20.87-13.75C84.46,113.85,45,127.1,35.1,130.58Z"/><path class="cls-2" d="M114.44,56.62a2.62,2.62,0,0,0-2.65-2.32h0a2.66,2.66,0,0,0-2.49,2.9l1.24,10.11a1,1,0,0,1-.33.83c-1.16,1-4.55,3.89-5.38,4.63a8,8,0,0,1-3.64,2L85,75.26a9.74,9.74,0,0,1-3.65-2c-.83-.66-4.22-3.64-5.38-4.64a1.05,1.05,0,0,1-.33-.83l1.24-10.1a2.58,2.58,0,1,0-5.13-.58L70.46,70a1.74,1.74,0,0,0,.66,1.57c1.58,1.33,5.3,4.31,6.46,5.63,1.91,2.08,6.3,7.79,6.3,7.79l-1.16,21.12,19.79-1.41V84.53s4.39-5.71,6.29-7.78c1.16-1.24,4.81-4.31,6.46-5.63a1.76,1.76,0,0,0,.67-1.58Z"/><path class="cls-2" d="M93.15,56.79a9.64,9.64,0,0,0-9.27,8.45,1.37,1.37,0,0,0,1.32,1.57h15.74a1.33,1.33,0,0,0,1.32-1.57A9.3,9.3,0,0,0,93.15,56.79Z"/><path class="cls-2" d="M93.15,75.26c4.39,0,7.87-3.81,7.87-8.45H85.29C85.29,71.45,88.85,75.26,93.15,75.26Z"/><line class="cls-3" x1="93.15" y1="82.96" x2="93.07" y2="104.74"/><path class="cls-3" d="M88.85,75.17s1.16,7.38,4.3,7.38c3.48,0,4.31-7.38,4.31-7.38"/><path class="cls-3" d="M85.78,75.26a52,52,0,0,1,.25,7C85.53,85,83.79,85,83.79,85"/><path class="cls-3" d="M100.44,75.26a52,52,0,0,0-.25,7c.5,2.73,2.24,2.73,2.24,2.73"/>

Answer 1

В вашем случае как-то так -

#svgInternalID:hover>path,#svgInternalID:hover>line{ 
	stroke:#9a7131; 
} 
#svgInternalID:hover>path.cls-4{ 
	fill:#9a7131; 
} 
/*стили ниже нужны для того, чтобы вы понимали где граница*/ 
#svgInternalID{ 
	border:1px solid #000; 
}
<svg id="svgInternalID" data-name="Шар 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" height='200' width='200'><defs><style>.cls-1{fill:#8fab8b;opacity:0;}.cls-2,.cls-5{fill:#fff;}.cls-2,.cls-3,.cls-5{stroke:#3a7131;stroke-miterlimit:10;}.cls-2,.cls-3{stroke-width:3px;}.cls-3{fill:none;}.cls-4{fill:#3a7131;}.cls-5{stroke-width:4px;}</style></defs><title>viaduk</title><rect class="cls-1" x="-2.68" y="-2.49" width="200" height="200"/><path class="cls-2" d="M162.8,90.91a2.56,2.56,0,0,0-2-3.81h0a3.23,3.23,0,0,0-3.14,2.07c-.17.33-3.9,7.21-4.23,7.45-1.32.75-9.77-5.54-12.5-6.54-.09,0-.25-.08-.33-.08l-17.06-1.49-.34,5c-.49,4-3.14,4.39-3.14,4.39l-1,7.95s7.62,2.32,10.11,3.47,9.6,5.64,9.6,5.64l2.07-14.66c2.49-1.16,11.76,3.31,13.92,3.14.74-.08,1.65-1.32,1.65-1.32Z"/><path class="cls-2" d="M134.15,71.2c-4.39-.5-8.45,2.65-9.69,7.29a1.23,1.23,0,0,0,1.07,1.65l14.74,1.66a1.42,1.42,0,0,0,1.5-1.41C141.68,75.67,138.54,71.7,134.15,71.2Z"/><path class="cls-2" d="M131.83,89.34c4.06.49,7.87-2.9,8.44-7.46l-14.74-1.65C125,84.78,127.77,88.92,131.83,89.34Z"/><line class="cls-3" x1="130.83" y1="96.95" x2="129.01" y2="110.29"/><path class="cls-2" d="M126.94,88.76s.42,7.37,3.89,7.78c3.81.41,5.72-6.71,5.72-6.71"/><path class="cls-2" d="M120.07,97.78s1.9.25,2.81-2.4a45.6,45.6,0,0,0,.67-7c-4-.41-12.26,2.74-15.08,3.9a2.33,2.33,0,0,0-1.4,1.41l-4,11.51,5.38-.17,2.74-7a1.49,1.49,0,0,1,1-1C113.77,96.38,118.41,95.3,120.07,97.78Z"/><path class="cls-2" d="M139.86,90.25s-1.24,5.21-1.16,6.87c.17,2.73,2.07,3,2.07,3"/><path class="cls-2" d="M169.84,79l13.83-4.8a2,2,0,0,1,2.57,1.24l2.65,7.79a2,2,0,0,1-1.24,2.56L173.9,90.5a1.66,1.66,0,0,1-1.24,0l-7-2.16a2,2,0,0,1-1-3.14l4.22-5.55A2,2,0,0,1,169.84,79Z"/><line class="cls-3" x1="111.79" y1="105.57" x2="164.46" y2="87.35"/><path class="cls-2" d="M59,68.8c4.47-.5,8.7,2.73,10,7.53A1.31,1.31,0,0,1,68,78.07L52.82,79.81a1.37,1.37,0,0,1-1.49-1.41C51.33,73.35,54.56,69.29,59,68.8Z"/><path class="cls-2" d="M73.44,96s-2.73-.33-3.23-4.47l-.33-5.13L52.41,88c-.17,0-.25.08-.33.08-2.65.91-9.61,6-11.85,8a2.21,2.21,0,0,0-.58.91l-3.56,10.18a2.57,2.57,0,0,0,1.49,3.15h0a2.5,2.5,0,0,0,3.23-1.49l3.4-8.94c2.57-2.16,4.72-3.9,8.11-1.49l2.16,15s7.62-2.49,10.1-3.65S75.18,108,75.18,108Z"/><path class="cls-2" d="M61.43,87.35c-4.22.5-8.11-3-8.69-7.62L67.89,78C68.47,82.71,65.57,86.93,61.43,87.35Z"/><line class="cls-3" x1="62.43" y1="95.22" x2="64.33" y2="108.88"/><path class="cls-2" d="M66.4,86.77s-.41,7.53-4,8c-4,.41-5.88-6.87-5.88-6.87"/><path class="cls-2" d="M73.44,96s-2,.25-2.9-2.48c-.58-1.66-.66-7.12-.66-7.12,4.06-.42,12.51,2.81,15.49,4a2.53,2.53,0,0,1,1.41,1.49l4,11.85-5.54-.25.08-5a1.83,1.83,0,0,0-1-1.08C82.88,96.79,76.51,91.16,73.44,96Z"/><path class="cls-2" d="M53.15,88.34s1.24,5.39,1.16,7c-.16,2.82-2.15,3.07-2.15,3.07"/><path class="cls-2" d="M23.84,118,9.51,121.05a2,2,0,0,1-2.4-1.57l-1.74-8a2,2,0,0,1,1.57-2.4L21.19,106a1.66,1.66,0,0,1,1.24.17l6.62,3a2.06,2.06,0,0,1,.67,3.23l-4.89,5A2.38,2.38,0,0,1,23.84,118Z"/><line class="cls-3" x1="84.62" y1="98.69" x2="30.13" y2="110.37"/><path class="cls-2" d="M44.87,62.83H28.47a2.22,2.22,0,0,1-2.23-2.23V51.41a2.22,2.22,0,0,1,2.23-2.24H44.79a2.32,2.32,0,0,1,1.32.41l6.55,4.81a2.28,2.28,0,0,1-.09,3.72L46.11,62.5A3.32,3.32,0,0,1,44.87,62.83Z"/><path class="cls-2" d="M143.5,62.83h16.4a2.23,2.23,0,0,0,2.24-2.23V51.41a2.23,2.23,0,0,0-2.24-2.24H143.59a2.36,2.36,0,0,0-1.33.41l-6.54,4.81a2.28,2.28,0,0,0,.08,3.72l6.46,4.39A3,3,0,0,0,143.5,62.83Z"/><line class="cls-3" x1="53.57" y1="55.96" x2="134.73" y2="55.96"/><path class="cls-4" d="M114.19,129.34a1.59,1.59,0,0,1,1.49,2,12,12,0,0,1-22.86,0,1.52,1.52,0,0,1,1.49-2h0a1.42,1.42,0,0,1,1.41,1.07,8.91,8.91,0,0,0,8.53,6.21,9,9,0,0,0,8.53-6.21,1.52,1.52,0,0,1,1.41-1.07Z"/><path class="cls-4" d="M134.15,129.34a1.59,1.59,0,0,1,1.49,2,12,12,0,0,1-22.86,0,1.51,1.51,0,0,1,1.49-2h0a1.42,1.42,0,0,1,1.41,1.07,8.91,8.91,0,0,0,8.53,6.21,9,9,0,0,0,8.53-6.21,1.5,1.5,0,0,1,1.41-1.07Z"/><path class="cls-4" d="M154.19,129.34a1.59,1.59,0,0,1,1.49,2,12,12,0,0,1-22.86,0,1.52,1.52,0,0,1,1.49-2h0a1.42,1.42,0,0,1,1.41,1.07,8.91,8.91,0,0,0,8.53,6.21,9,9,0,0,0,8.53-6.21,1.52,1.52,0,0,1,1.41-1.07Z"/><path class="cls-4" d="M174.15,129.34a1.59,1.59,0,0,1,1.49,2,12,12,0,0,1-22.86,0,1.51,1.51,0,0,1,1.49-2h0a1.42,1.42,0,0,1,1.41,1.07,8.91,8.91,0,0,0,8.53,6.21,9,9,0,0,0,8.53-6.21,1.5,1.5,0,0,1,1.41-1.07Z"/><path class="cls-4" d="M34.19,129.34a1.59,1.59,0,0,1,1.49,2,12,12,0,0,1-22.86,0,1.52,1.52,0,0,1,1.49-2h0a1.42,1.42,0,0,1,1.41,1.07,8.91,8.91,0,0,0,8.53,6.21,9,9,0,0,0,8.53-6.21,1.52,1.52,0,0,1,1.41-1.07Z"/><path class="cls-4" d="M54.23,129.34a1.59,1.59,0,0,1,1.49,2,12,12,0,0,1-22.86,0,1.52,1.52,0,0,1,1.49-2h0a1.41,1.41,0,0,1,1.41,1.07,8.92,8.92,0,0,0,8.53,6.21,9,9,0,0,0,8.53-6.21,1.52,1.52,0,0,1,1.41-1.07Z"/><path class="cls-4" d="M74.19,129.34a1.59,1.59,0,0,1,1.49,2,12,12,0,0,1-22.86,0,1.52,1.52,0,0,1,1.49-2h0a1.42,1.42,0,0,1,1.41,1.07,8.91,8.91,0,0,0,8.53,6.21,9,9,0,0,0,8.53-6.21,1.52,1.52,0,0,1,1.41-1.07Z"/><path class="cls-4" d="M94.15,129.34a1.59,1.59,0,0,1,1.49,2,12,12,0,0,1-22.86,0,1.51,1.51,0,0,1,1.49-2h0a1.42,1.42,0,0,1,1.41,1.07,8.91,8.91,0,0,0,8.53,6.21,9,9,0,0,0,8.53-6.21,1.5,1.5,0,0,1,1.41-1.07Z"/><path class="cls-5" d="M35.1,130.58c-1.24.41-2.57-.42-2.32-1.49,2.82-15.82,66.5-26.09,76.52-24.18,38.18,7.45,41.91,22,24.43,26a4.35,4.35,0,0,1-4.14-1.24c-3.31-3.9-12-13-20.87-13.75C84.46,113.85,45,127.1,35.1,130.58Z"/><path class="cls-2" d="M114.44,56.62a2.62,2.62,0,0,0-2.65-2.32h0a2.66,2.66,0,0,0-2.49,2.9l1.24,10.11a1,1,0,0,1-.33.83c-1.16,1-4.55,3.89-5.38,4.63a8,8,0,0,1-3.64,2L85,75.26a9.74,9.74,0,0,1-3.65-2c-.83-.66-4.22-3.64-5.38-4.64a1.05,1.05,0,0,1-.33-.83l1.24-10.1a2.58,2.58,0,1,0-5.13-.58L70.46,70a1.74,1.74,0,0,0,.66,1.57c1.58,1.33,5.3,4.31,6.46,5.63,1.91,2.08,6.3,7.79,6.3,7.79l-1.16,21.12,19.79-1.41V84.53s4.39-5.71,6.29-7.78c1.16-1.24,4.81-4.31,6.46-5.63a1.76,1.76,0,0,0,.67-1.58Z"/><path class="cls-2" d="M93.15,56.79a9.64,9.64,0,0,0-9.27,8.45,1.37,1.37,0,0,0,1.32,1.57h15.74a1.33,1.33,0,0,0,1.32-1.57A9.3,9.3,0,0,0,93.15,56.79Z"/><path class="cls-2" d="M93.15,75.26c4.39,0,7.87-3.81,7.87-8.45H85.29C85.29,71.45,88.85,75.26,93.15,75.26Z"/><line class="cls-3" x1="93.15" y1="82.96" x2="93.07" y2="104.74"/><path class="cls-3" d="M88.85,75.17s1.16,7.38,4.3,7.38c3.48,0,4.31-7.38,4.31-7.38"/><path class="cls-3" d="M85.78,75.26a52,52,0,0,1,.25,7C85.53,85,83.79,85,83.79,85"/><path class="cls-3" d="M100.44,75.26a52,52,0,0,0-.25,7c.5,2.73,2.24,2.73,2.24,2.73"/>

READ ALSO
Добавить новую таблицу в knex.js

Добавить новую таблицу в knex.js

Есть база данных в postgresql и 10 таблиц, теперь необходимо добавить еще пару таблиц, в файле migrationjs

186
Как обнулить input после записи в перемунную?

Как обнулить input после записи в перемунную?

Записали в zum значение которое выбрал пользователь, как обнулить значение input после нажатия?

200
Валидность группы инпутов

Валидность группы инпутов

Всем привет Написал "слайдер" для опросникаЕсть проблема

199