SVG测试.剪裁（剪切）clip-path

1、ZC：被<clipPath/>所包含的区域，是被剪裁出来的区域，能够显示出来

　　ZC：疑问：能不能反选？即 被<clipPath/>所包含的区域不显示，反而剩余的部分能显示出来？？（20181025）这个需求暂时 我还不知怎么弄...

2、测试代码：

<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">

    <style type="text/css">
    <![CDATA[
    <!--

        path
        {
            stroke:black;
            stroke-width:20px;
            fill:none;
        }

        .path01
        {
            stroke-dasharray: 5;
            stroke-dashoffset: 10;
            -webkit-animation: dash01 1s linear infinite;
        }
        @-webkit-keyframes dash01
        {
          to
          {
            stroke-dashoffset: 0;
          }
        }

        .path03
        {
            stroke-dasharray: 50;
            stroke-dashoffset: 0;
            -webkit-animation: dash03 5s linear infinite;
        }
        @-webkit-keyframes dash03
        {
          to
          {
            stroke-dashoffset: 100;
          }
        }

    -->
    ]]>
    </style>

    <defs>
        <clipPath id="c-star">
            <polygon points="150 100 179.389 9.54915 102.447 65.4509 197.533 65.4509 120.611 9.54915"/>
        </clipPath>
        <clipPath id="c-star-rule">
            <polygon points="150 100 179.389 9.54915 102.447 65.4509 197.533 65.4509 120.611 9.54915" transform="translate(-100)" clip-rule="evenodd"/>
        </clipPath>
        <clipPath id="c-two-grap">
            <polygon points="150 100 179.389 9.54915 102.447 65.4509 197.533 65.4509 120.611 9.54915" transform="translate(0, 100)" />
            <rect x="100" y="100" width="50" height="50" />
        </clipPath>

        <clipPath id="z01">
            <polygon points="195,200 195,380 190,380 200,400 210,380 205,380 205,200" />
        </clipPath>

        <clipPath id="z02">
            <polygon points="-5,-25 -5,5 -10,5 0,25 10,5 5,5 5,-25" />
        </clipPath>
     </defs>

     <rect x="100" y="0" fill="red" width="100" height="100" clip-path="url(#c-star)"/>
     <rect x="0" y="0" fill="green" width="100" height="100" clip-path="url(#c-star-rule)"/>
     <rect x="100" y="100" fill="blue" width="100" height="100" clip-path="url(#c-two-grap)"/>


    <line x1="0" y1="-25" x2="0" y2="25" stroke="blue" stroke-width="20" clip-path="url(#z02)" transform=" translate(100, 200) scale(0.5, 0.5)" />

    <line x1="200" y1="200" x2="200" y2="400" stroke="blue" stroke-width="20" 
        clip-path="url(#z01)" transform="translate(100, 0)" class="path01"/>
<!--
    <line x1="100" y1="200" x2="100" y2="400" stroke="red" stroke-width="20" class="path01"/>

    <path d="M 100,200 L100,400" stroke="red" stroke-width="20" class="path01"/>
-->
</svg>

 

3、

4、

5、