SVG路径悬停填充背景。领土计划非常先进

Question

Is there a simply way, to use a svg path hover with images? 有没有一种简单的方法可以在图像上使用svg路径悬停？ I need to make a flor plain, teritory plain, there is a 3 house plan. 我需要做一个弗洛尔平原，地域平原，这里有一个三房计划。 Path and hover works, but there is a problem to on hover put a image, that is a lighter that other areas, or it there a way to use opacity hover? 路径和悬停是可行的，但是在悬停上放置图像会出现问题，即比其他区域更亮，还是有使用不透明悬停的方法？

Here is a demo: 这是一个演示：

http://wpbaltic.com/svg/ http://wpbaltic.com/svg/

<div class="house">
    <?xml version="1.0" encoding="iso-8859-1"?>
    <!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

    <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 3204.32 2001.2" style="enable-background:new 0 0 3204.32 2001.2;"
         xml:space="preserve">

    <g id="Layer_1">
        <path style="fill-rule:evenodd;clip-rule:evenodd;fill:none;" d="M1524.416,920.84l222.542-113.869l71.469,16.848l10.772,287.96
            L1182.3,1504.114l-549.336-410.799v-184.86l71.236-31.495l-20.549-16.432l130.142-34.233l426.044,230.048l283.573-131.456
            l-16.139-4.487L1524.416,920.84z"/>
    </g>
    <g id="Layer_2">
        <path style="fill-rule:evenodd;clip-rule:evenodd;fill:none;" d="M2039.992,984.159L1831.18,1110.8l-10.772-287.96l-71.469-16.848
            l-222.542,113.869l-17.146-0.44l-190.719-53.025l-9.589-146.518l35.618-19.171l4.11-28.756l113.703-45.188l149.321,41.08
            l63.016-24.648l363.028,87.637L2039.992,984.159z"/>
    </g>
    <g id="Layer_3">
        <polygon style="fill-rule:evenodd;clip-rule:evenodd;fill:none;" points="2586.798,832.119 2491.695,885.328 2486.034,846.837 
            1863.338,648.72 1864.47,482.302 1933.533,457.396 1957.309,461.924 1992.406,456.264 2566.419,605.701 2569.815,637.399 
            2596.987,653.248    "/>
    </g>
    </svg>
</div>

Answer 1

You can set opacity CSS on hover like this. 您可以像这样在悬停上设置不透明度CSS。

 :hover { opacity : 0.5; }

 <div class="house"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 3204.32 2001.2" xml:space="preserve"> <g id="Layer_1"> <path style="fill-rule:evenodd;clip-rule:evenodd;fill:black;" d="M1524.416,920.84l222.542-113.869l71.469,16.848l10.772,287.96 L1182.3,1504.114l-549.336-410.799v-184.86l71.236-31.495l-20.549-16.432l130.142-34.233l426.044,230.048l283.573-131.456 l-16.139-4.487L1524.416,920.84z"/> </g> <g id="Layer_2"> <path style="fill-rule:evenodd;clip-rule:evenodd;fill:black;" d="M2039.992,984.159L1831.18,1110.8l-10.772-287.96l-71.469-16.848 l-222.542,113.869l-17.146-0.44l-190.719-53.025l-9.589-146.518l35.618-19.171l4.11-28.756l113.703-45.188l149.321,41.08 l63.016-24.648l363.028,87.637L2039.992,984.159z"/> </g> <g id="Layer_3"> <polygon style="fill-rule:evenodd;clip-rule:evenodd;fill:black;" points="2586.798,832.119 2491.695,885.328 2486.034,846.837 1863.338,648.72 1864.47,482.302 1933.533,457.396 1957.309,461.924 1992.406,456.264 2566.419,605.701 2569.815,637.399 2596.987,653.248 "/> </g> </svg> </div>

SVG路径悬停填充背景。领土计划非常先进

问题描述

1 个解决方案

解决方案1
0 2015-10-02 03:36:57

SVG路径悬停填充背景。 领土计划非常先进

问题描述

1 个解决方案

解决方案1 0 2015-10-02 03:36:57

SVG路径悬停填充背景。领土计划非常先进

解决方案1
0 2015-10-02 03:36:57