SVG 蒙版不起作用



我有一个SVG矢量对象,它由几个路径组成,其中一些需要被屏蔽。

为此,我制作了 5 个 SVG 蒙版。它们似乎都在工作(即掩盖各自的对象),除了一个!我可能错过了一些明显的东西,但我没有看到它。

简而言之:如何正确遮罩圆圈内的可见元素?任何指示将不胜感激。

对象在此笔处:http://codepen.io/anon/pen/LNYOya

SVG 代码:

<svg version="1.1" id="het-lekkerste-van" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
     y="0px" width="504.789px" height="186.027px" viewBox="0 0 504.789 186.027" enable-background="new 0 0 504.789 186.027"
     xml:space="preserve">
<defs>
    <g id="l-masks">
        <mask id="mask-l-3">
            <path fill="none" stroke="#ffffff" stroke-width="7" stroke-miterlimit="10" d="M59.644,94.138
                c0,0,70.4-35.679,57.122-49.875"/>
        </mask>
        <mask id="mask-l-2-2">
            <path fill="none" stroke="#ffffff" stroke-width="7" stroke-miterlimit="10" d="M117.631,45.638
                c0,0-12.5-12.875-25,29.75"/>
        </mask>
        <mask id="mask-l-2-1">
            <path fill="none" stroke="#ffffff" stroke-width="7" stroke-miterlimit="10" d="M92.144,74.763c0,0-16.375,62-41.75,59.5"/>
        </mask>
        <mask id="mask-l-1-2"> 
            <path fill="none" stroke="#ffffff" stroke-width="7" stroke-miterlimit="10" d="M53.644,134.263
                c0,0-8.5,0.25-8-7.5c0,0,0.5-10.875,27.25-7.75"/>
        </mask>
        <mask id="mask-l-1-1">
            <path fill="none" stroke="#ffffff" stroke-width="7" stroke-miterlimit="10" d="M73.519,118.638
                c0,0,19.25,4.25,20.375,5.125c0,0,13.875,2.625,17,0.75c0,0,16.875-3.625,28.125-20.25"/>
        </mask>
    </g>
    <mask id="mask-cirkel">
        <path fill="none" stroke="#ffffff" stroke-width="9" stroke-miterlimit="10" d="M3.6829999999999927,93.014a89.013,89.013 0 1,0 178.026,0a89.013,89.013 0 1,0 -178.026,0"/>
    </mask>
</defs>
<path id="cirkel" style="mask: url(#mask-cirkel);" d="M92.696,186.027c-51.288,0-93.013-41.726-93.013-93.014S41.409,0,92.696,0s93.013,41.727,93.013,93.015
    S143.984,186.027,92.696,186.027z M92.696,8C45.82,8,7.683,46.137,7.683,93.014s38.137,85.014,85.013,85.014
    s85.013-38.137,85.013-85.014S139.573,8,92.696,8z"/>
<g id="l">
    <path id="l-1-1" style="mask: url(#mask-l-1-1);" d="M118.746,42.38l-3.498,5.077c0.135,0.371,0.228,0.785,0.228,1.29c0,1.65-0.766,3.502-2.271,5.494
        c-1.588,2.098-3.459,4.146-5.561,6.075c-2.14,1.962-4.335,3.812-6.527,5.482c-1.211,0.929-2.298,1.739-3.253,2.43c0,0,0,0,0,0.001
        c-3.865,2.9-8.178,5.521-8.178,5.521s0,0,0-0.001l-0.001,0.001c-2.521,1.682-5.14,3.347-7.78,4.97
        c-2.713,1.658-5.338,3.208-7.806,4.585c-2.527,1.424-4.851,2.702-6.899,3.815c-2.042,1.107-3.896,2.075-5.532,2.898
        c-1.55,0.843-1.875,1.933-1.875,2.695c0,1.421,0.898,2.271,2.402,2.271c0.198,0,0.511-0.032,1.315-0.308l0.124-0.055
        c2.767-1.469,6.344-3.409,10.936-5.924c3.87-2.13,7.981-4.514,12.254-7.1c0,0,3.608-2.058,8.171-5.201
        c1.803-1.205,4.122-2.822,6.905-4.802c2.9-2.066,5.806-4.412,8.63-6.972c2.823-2.557,5.296-5.258,7.348-8.021
        c2.117-2.846,3.188-5.67,3.188-8.385c0-2.021-0.543-3.74-1.62-5.114C119.234,42.836,118.996,42.599,118.746,42.38z"/>
    <path id="l-1-2" style="mask: url(#mask-l-1-2);" d="M97.864,68.228c0.496-1.402,1.083-2.975,1.756-4.702c1.073-2.747,2.342-5.44,3.771-7.994
        c1.407-2.516,3.021-4.69,4.799-6.467c1.699-1.701,3.532-2.527,5.604-2.527c0.656,0,1.084,0.158,1.274,0.465
        c0.08,0.131,0.124,0.299,0.18,0.454l3.498-5.077c-1.082-0.948-2.517-1.436-4.295-1.436c-3.45,0-6.563,1.297-9.253,3.849
        c-2.591,2.461-4.9,5.469-6.861,8.944c-1.938,3.439-3.663,7.063-5.119,10.768c-1.433,3.649-2.59,6.678-3.532,9.244
        c0.014-0.008,4.316-2.625,8.176-5.52C97.863,68.229,97.863,68.229,97.864,68.228z"/>
    <path id="l-2-1" style="mask: url(#mask-l-2-1);" d="M86.822,81.6c-0.608,1.686-1.287,3.558-2.038,5.631c-1.11,3.063-2.368,6.288-3.739,9.578
        c-1.383,3.332-2.929,6.773-4.587,10.227c-1.564,3.256-3.271,6.333-5.078,9.163c0,0,0,0,0,0s-1.403,2.627-3.389,5.012l0,0
        c0,0-0.001,0.001-0.001,0.001c-2.216,2.853-4.579,5.235-7.034,7.084c-2.675,2.015-5.534,3.042-8.5,3.079v5.547
        c4.053-0.26,7.848-1.707,11.29-4.329c3.621-2.764,7.031-6.359,10.148-10.693c1.939-2.555,3.326-4.936,3.326-4.936
        c1.71-2.868,3.364-5.915,4.928-9.076c1.76-3.563,3.426-7.209,4.958-10.843c1.524-3.621,2.968-7.261,4.291-10.828
        c1.281-3.458,2.478-6.733,3.595-9.817C90.43,79.544,86.822,81.6,86.822,81.6z"/>
    <path id="l-2-2" style="mask: url(#mask-l-2-2);" d="M52.291,131.382c-1.178,0-2.102-0.348-2.819-1.061c-0.719-0.719-1.068-1.549-1.068-2.541
        c0-1.418,0.448-2.518,1.372-3.369c0.998-0.914,2.239-1.623,3.694-2.102c1.507-0.502,3.077-0.84,4.667-1.003
        c1.61-0.174,2.947-0.26,3.971-0.26c1.305,0,2.573,0.021,3.763,0.064c0.715,0.026,1.426,0.061,2.122,0.1
        c1.985-2.385,3.388-5.011,3.388-5.011l0-0.001c-2.656-0.234-5.478-0.35-8.395-0.35c-1.783,0-3.841,0.18-6.118,0.537
        c-2.293,0.36-4.485,0.975-6.511,1.829c-2.072,0.875-3.854,2.117-5.29,3.692c-1.495,1.646-2.256,3.777-2.256,6.348
        c0,2.29,0.756,4.335,2.24,6.065c1.519,1.761,3.567,2.654,6.084,2.654c0.444,0,0.884-0.026,1.322-0.054v-5.547
        C52.401,131.375,52.346,131.382,52.291,131.382z"/>
    <path id="l-3" style="mask: url(#mask-l-3);" d="M138.434,105.592c-0.596-0.531-1.269-0.799-1.997-0.799c-0.925,0-1.74,0.346-2.472,1.084
        c-0.934,1.113-1.594,1.876-2.083,2.404c-0.52,0.563-0.994,1.06-1.426,1.49c-0.429,0.43-0.855,0.834-1.28,1.217
        c-0.433,0.391-1.037,0.889-1.833,1.506c-4.298,3.696-8.269,6.258-11.805,7.621c-3.537,1.362-7.044,2.056-10.432,2.056
        c-2.225,0-4.457-0.191-6.641-0.569c-2.228-0.383-4.533-0.876-6.849-1.466c-2.225-0.563-4.638-1.15-7.384-1.8
        c-2.223-0.526-4.577-0.983-7.013-1.37c0,0-1.387,2.381-3.326,4.936c2.967,0.426,5.808,0.951,8.452,1.559
        c2.845,0.66,5.584,1.323,8.144,1.974c2.651,0.67,5.217,1.229,7.627,1.655c2.476,0.448,5.003,0.67,7.516,0.67
        c3.862,0,7.838-0.77,11.813-2.291c3.972-1.519,8.364-4.262,13.052-8.154c0.884-0.703,1.613-1.303,2.192-1.79
        c0.582-0.5,1.154-1.019,1.7-1.562c0.568-0.575,1.178-1.229,1.808-1.949c0.659-0.745,1.519-1.729,2.533-2.919
        c0.415-0.416,0.634-0.937,0.634-1.505C139.365,106.832,139.044,106.139,138.434,105.592z"/>
</g>
<g id="het">
    <path d="M224.994,12.783h5.677v13.245h14.303V12.783h5.677v31.244h-5.677V30.913H230.67v13.114h-5.677L224.994,12.783
        L224.994,12.783z"/>
    <path d="M262.725,12.783h18.702v4.885h-13.025v8.186h10.518v4.885h-10.518v8.405h13.729v4.885h-19.405V12.783z"/>
    <path d="M301.654,17.668H291.4v-4.885h26.185v4.885h-10.254v26.359h-5.677V17.668z"/>
</g>
<g id="lekkerste">
    <path d="M224.994,75.983h5.677v26.358h13.511v4.886h-19.188V75.983z"/>
    <path d="M254.869,75.983h18.702v4.885h-13.025v8.186h10.519v4.885h-10.519v8.405h13.729v4.885h-19.406V75.983L254.869,75.983z"/>
    <path d="M286.329,75.983h5.677v12.718h4.049l7.35-12.718h6.161l-8.846,14.874v0.088l9.373,16.282h-6.381l-7.657-13.643h-4.049
        v13.643h-5.677V75.983L286.329,75.983z"/>
    <path d="M320.957,75.983h5.678v12.718h4.048l7.35-12.718h6.161l-8.846,14.874v0.088l9.373,16.282h-6.381l-7.657-13.643h-4.048
        v13.643h-5.678V75.983L320.957,75.983z"/>
    <path d="M355.583,75.983h18.702v4.885H361.26v8.186h10.518v4.885H361.26v8.405h13.729v4.885h-19.406V75.983z"/>
    <path d="M387.044,75.983h10.076c3.39,0,4.93,0.264,6.293,0.88c3.124,1.408,5.104,4.4,5.104,8.537c0,3.74-1.98,7.217-5.28,8.537
        v0.088c0,0,0.439,0.439,1.057,1.54l6.425,11.662h-6.337l-6.205-11.662h-5.456v11.662h-5.677V75.983z M397.825,90.637
        c3.036,0,4.93-1.805,4.93-4.93c0-2.992-1.276-4.84-5.722-4.84h-4.313v9.77H397.825L397.825,90.637z"/>
    <path d="M421.859,99.219c0,0,3.388,3.3,7.789,3.3c2.376,0,4.532-1.231,4.532-3.784c0-5.589-14.742-4.621-14.742-14.214
        c0-5.193,4.489-9.065,10.474-9.065c6.161,0,9.329,3.346,9.329,3.346l-2.464,4.619c0,0-2.992-2.729-6.909-2.729
        c-2.641,0-4.709,1.541-4.709,3.741c0,5.544,14.698,4.181,14.698,14.17c0,4.973-3.784,9.152-10.297,9.152
        c-6.953,0-10.782-4.269-10.782-4.269L421.859,99.219z"/>
    <path d="M459.16,80.868h-10.254v-4.885h26.185v4.885h-10.253v26.359h-5.678V80.868z"/>
    <path d="M485.383,75.983h18.702v4.885h-13.025v8.186h10.518v4.885h-10.518v8.405h13.729v4.885h-19.405V75.983z"/>
</g>
<g id="van">
    <path d="M220.989,139.184h6.117l6.864,20.375c0.615,1.804,1.145,4.576,1.188,4.576h0.088c0.044,0,0.572-2.772,1.188-4.576
        l6.908-20.375h6.072l-11.396,31.244h-5.633L220.989,139.184z"/>
    <path d="M273.792,162.419h-10.958l-2.641,8.01h-5.854l11.002-31.244h5.94l11.002,31.244h-5.854L273.792,162.419z M268.291,144.596
        c0,0-0.704,3.081-1.319,4.841l-2.772,8.36h8.186l-2.771-8.36c-0.572-1.76-1.232-4.841-1.232-4.841H268.291z"/>
    <path d="M292.445,139.184h5.677l11.838,18.042c1.188,1.805,2.597,4.841,2.597,4.841h0.088c0,0-0.308-2.992-0.308-4.841v-18.042
        h5.633v31.244h-5.633l-11.839-17.999c-1.188-1.805-2.597-4.841-2.597-4.841h-0.088c0,0,0.309,2.992,0.309,4.841v17.999h-5.677
        V139.184L292.445,139.184z"/>
</g>
</svg>

1-2-1 掩码的路径定义似乎有问题。如果将该路径定义替换为 l-2-1 形状的路径定义,则它可以完美运行。我自己看不出出了什么问题 - 原始路径似乎完全有效,并且在面具外画得很好。

最新更新