Question

我正在尝试在我的svg绘图中单击一下以在悬停时突出显示。是可以用css完成还是我需要使用javascript？

这是我的html：

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1024px"
   height="768px" viewBox="0 0 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve">
<g id="Warstwa_1">
  <g>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M825.61,601.428c0-55.844-117.614,25.921-257.144,29.87
      c-137.662,3.896-176.422-82.646-210.389-81.817c-53.246,1.299,6.986,64.935,6.986,64.935">  <animate dur="0.1s" to="#000000" from="#00755F" attributeName="stroke" begin="mouseover"/>
    <animate  dur="0.1s" to="#4e86b1" from="#00755F" attributeName="stroke" begin="mouseout"/></path>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M826.179,592.094c0-55.844-121.106,41.499-260.634,44.886
      c-135.795,3.409-172.364-99.479-208.035-95.535c-50.922,5.629,9.69,69.933,9.69,69.933">  <animate  dur="0.1s" to="#000000" from="#00755F" attributeName="stroke" begin="mouseover"/>
    <animate  dur="0.1s" to="#4e86b1" from="#000000" attributeName="stroke" begin="mouseout"/></path>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M826.747,582.759c0-55.844-124.6,57.077-264.124,59.902
      c-133.929,2.922-167.956-116.474-205.682-109.252c-48.385,9.262,12.395,74.93,12.395,74.93"/>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M827.314,573.425c0-55.844-128.091,72.655-267.613,74.919
      c-132.062,2.434-163.305-133.679-203.328-122.971c-45.755,12.242,15.098,79.928,15.098,79.928"/>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M827.883,564.09c0-55.844-131.584,88.234-271.104,89.936
      c-130.195,1.947-158.511-151.123-200.974-136.688c-43.118,14.657,17.802,84.925,17.802,84.925"/>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M828.451,554.756c0-55.844-135.076,103.812-274.595,104.951
      c-128.328,1.461-153.666-168.831-198.62-150.405c-40.533,16.613,20.506,89.923,20.506,89.923"/>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M829.02,545.422c0-55.844-138.568,119.39-278.085,119.967
      c-126.461,0.974-153.608-194.835-196.266-164.123c-40.653,11.203,23.209,94.921,23.209,94.921"/>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M829.588,536.087c0-55.844-142.062,134.968-281.575,134.983
      c-124.594,0.486-149.806-213.533-193.912-177.84c-38.554,12.853,25.913,99.918,25.913,99.918"/>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M830.156,526.753c0-55.844-145.554,150.546-285.065,149.999
      c-122.728,0-146.004-232.231-191.559-191.558c-36.455,14.504,28.617,104.915,28.617,104.915"/>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M830.724,517.419c0-55.844-149.045,166.124-288.555,165.016
      c-120.861-0.487-135.317-242.556-189.205-205.276c-31.222,21.599,31.321,109.913,31.321,109.913"/>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M831.292,508.084c0-55.844-152.538,181.702-292.045,180.032
      c-118.994-0.975-131.311-261.733-186.852-218.993c-29.2,22.47,34.025,114.91,34.025,114.91"/>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M831.86,498.75c0-55.844-156.03,197.28-295.535,195.048
      c-117.127-1.462-127.649-281.201-184.498-232.711c-27.306,23.291,36.729,119.908,36.729,119.908"/>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M832.429,489.416c0-55.844-159.522,212.857-299.026,210.063
      c-115.26-1.948-124.374-300.938-182.143-246.429c-25.538,24.097,39.433,124.906,39.433,124.906"/>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M832.997,480.081c0-55.844-163.016,228.437-302.517,225.08
      c-113.393-2.435-121.518-320.91-179.79-260.146c-23.895,24.917,42.137,129.903,42.137,129.903"/>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M833.564,470.747c0-55.844-166.507,244.015-306.006,240.097
      c-111.526-2.923-119.102-341.081-177.436-273.864c-22.373,25.78,44.84,134.901,44.84,134.901"/>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M834.133,461.412c0-55.844-170,259.593-309.496,255.113
      c-109.66-3.41-117.128-361.4-175.082-287.581c-20.965,26.704,47.544,139.898,47.544,139.898"/>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M834.701,452.078c0-55.844-173.492,275.171-312.986,270.129
      c-107.793-3.896-115.586-381.818-172.729-301.299c-19.664,27.709,50.248,144.896,50.248,144.896"/>
  </g>/g></svg>

正如你所看到的，我试过'动画'，但它不起作用。我也试过这里的css：

g#Warstwa_1 path
{ stroke: red; }
g#Warstwa_1:hover path { stroke: blue; }

这使得整个图像改变颜色而不是单行。

这是现场的例子： http://www.ewelinawoloszyn.com/index11.html

任何建议都非常受欢迎。非常感谢您的帮助。

Answer 1

您需要在实际的:hover元素上设置path状态。

另请注意，您的SVG最后会收到格式错误的结束<g>。

svg {
  margin-top: -200px;
  /* demo positioning */
}

#Warstwa_1 path {
  stroke-width: 2px;
  /* for demo pusposes only */
  transition: stroke .4s;
}

#Warstwa_1 path:hover {
  stroke: red;

}

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1024 768" enable-background="new 0 0 1024 768" xml:space="preserve">
<g id="Warstwa_1">
  <g>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M825.61,601.428c0-55.844-117.614,25.921-257.144,29.87
      c-137.662,3.896-176.422-82.646-210.389-81.817c-53.246,1.299,6.986,64.935,6.986,64.935">  <animate dur="0.1s" to="#000000" from="#00755F" attributeName="stroke" begin="mouseover"/>
    <animate  dur="0.1s" to="#4e86b1" from="#00755F" attributeName="stroke" begin="mouseout"/></path>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M826.179,592.094c0-55.844-121.106,41.499-260.634,44.886
      c-135.795,3.409-172.364-99.479-208.035-95.535c-50.922,5.629,9.69,69.933,9.69,69.933">  <animate  dur="0.1s" to="#000000" from="#00755F" attributeName="stroke" begin="mouseover"/>
    <animate  dur="0.1s" to="#4e86b1" from="#000000" attributeName="stroke" begin="mouseout"/></path>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M826.747,582.759c0-55.844-124.6,57.077-264.124,59.902
      c-133.929,2.922-167.956-116.474-205.682-109.252c-48.385,9.262,12.395,74.93,12.395,74.93"/>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M827.314,573.425c0-55.844-128.091,72.655-267.613,74.919
      c-132.062,2.434-163.305-133.679-203.328-122.971c-45.755,12.242,15.098,79.928,15.098,79.928"/>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M827.883,564.09c0-55.844-131.584,88.234-271.104,89.936
      c-130.195,1.947-158.511-151.123-200.974-136.688c-43.118,14.657,17.802,84.925,17.802,84.925"/>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M828.451,554.756c0-55.844-135.076,103.812-274.595,104.951
      c-128.328,1.461-153.666-168.831-198.62-150.405c-40.533,16.613,20.506,89.923,20.506,89.923"/>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M829.02,545.422c0-55.844-138.568,119.39-278.085,119.967
      c-126.461,0.974-153.608-194.835-196.266-164.123c-40.653,11.203,23.209,94.921,23.209,94.921"/>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M829.588,536.087c0-55.844-142.062,134.968-281.575,134.983
      c-124.594,0.486-149.806-213.533-193.912-177.84c-38.554,12.853,25.913,99.918,25.913,99.918"/>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M830.156,526.753c0-55.844-145.554,150.546-285.065,149.999
      c-122.728,0-146.004-232.231-191.559-191.558c-36.455,14.504,28.617,104.915,28.617,104.915"/>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M830.724,517.419c0-55.844-149.045,166.124-288.555,165.016
      c-120.861-0.487-135.317-242.556-189.205-205.276c-31.222,21.599,31.321,109.913,31.321,109.913"/>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M831.292,508.084c0-55.844-152.538,181.702-292.045,180.032
      c-118.994-0.975-131.311-261.733-186.852-218.993c-29.2,22.47,34.025,114.91,34.025,114.91"/>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M831.86,498.75c0-55.844-156.03,197.28-295.535,195.048
      c-117.127-1.462-127.649-281.201-184.498-232.711c-27.306,23.291,36.729,119.908,36.729,119.908"/>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M832.429,489.416c0-55.844-159.522,212.857-299.026,210.063
      c-115.26-1.948-124.374-300.938-182.143-246.429c-25.538,24.097,39.433,124.906,39.433,124.906"/>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M832.997,480.081c0-55.844-163.016,228.437-302.517,225.08
      c-113.393-2.435-121.518-320.91-179.79-260.146c-23.895,24.917,42.137,129.903,42.137,129.903"/>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M833.564,470.747c0-55.844-166.507,244.015-306.006,240.097
      c-111.526-2.923-119.102-341.081-177.436-273.864c-22.373,25.78,44.84,134.901,44.84,134.901"/>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M834.133,461.412c0-55.844-170,259.593-309.496,255.113
      c-109.66-3.41-117.128-361.4-175.082-287.581c-20.965,26.704,47.544,139.898,47.544,139.898"/>
    <path fill="none" stroke="#00755F" stroke-miterlimit="10" d="M834.701,452.078c0-55.844-173.492,275.171-312.986,270.129
      c-107.793-3.896-115.586-381.818-172.729-301.299c-19.664,27.709,50.248,144.896,50.248,144.896"/>
  </g></g></svg>

Answer 2

我必须为.hi类添加结束标记并添加

g#Warstwa_1_kopia {
 display:block; 
}

然后Paulie_D CSS工作了。

Answer 3

对于动画，您可以使用此代码（CSS动画）并根据您的要求进行修改

svg:hover path {
 stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
    stroke: blue;
  }
}

这里我将悬停效果应用于svg（标签）。

有关CSS-animation的详细信息，请查看该链接。

如何在悬停

3 个答案: