SVG：厚く開いたストロークでマスクすることはできますか？

Question

私はtell a story of a journey with an SVGにしようとしています。それはかなりチーズです。私はfog of warエフェクトを作成して、人が経路をたどって地図が表示されるようにしたいと思います。

この画像は、私が何をしたいの逆です。私。最終的に私はその道を唯一の透明な部分にしたいと思います。これはcodepen hereのようにアニメーション化され、下に埋め込まれています。

code to satisfy the SO parser 

.journey-path{ 
 
    stroke-dasharray: 10961; 
 
    stroke-dashoffset: 10961; 
 
    mix-blend-mode: multiply; 
 
    animation: dash 10s linear forwards; 
 
} 
 
path{ 
 
    stroke-linecap:round; 
 
    stroke-linejoin:round; 
 
} 
 
@keyframes dash { 
 
    to { 
 
    stroke-dashoffset: 0; 
 
    } 
 
}

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg2" viewBox="0 0 2730 1976"> 
 
    
 
    <image width="2730.7" height="1976" preserveAspectRatio="none" xlink:href="http://i.stack.imgur.com/bHAUx.jpg" /> 
 
    
 
<path d="M1272.6 1162.4l57.7.8s-5.5-12.2 2.7-39.6c8.3-27.5 11.8-43.2 11.8-43.2l16.5-9 5-107 8-10.5-69.5-114.7-72 121.7 11.5 15.3 2.4 94.3 9.8 11s6.3 14.5 10.6 39.6c4.4 25 5.6 41.2 5.6 41.2z" id="path4364" fill="#fff" fill-rule="nonzero"/> 
 
    
 
    <path class="journey-path reveal" d="M1315 1302l-69.2 60.7s-43.2 28-17.3 32.4c26 4.4 166.5 13 183.8-17.2 17.3-30.3-15.2-125.4 8.6-151.3 23.7-26 320-199 320-199s49.6-23.7 54-49.7c4.3-26-473.5-257.2-473.5-257.2s-21.6-15.2-41-8.7c-19.6 6.4-588 348-588 348l-158-88.7c-9.2 3.7 153 81.6 153 81.6l356.7-214.2s99.5-23.8 88.6-73.5c-10.8-49.7-34.5-73.5 32.5-123.2 67-49.6 218.3-136 218.3-136s86.5-41.2 62.7-84.4c-23.8-43.3-147-86.5-129.7-119 17.3-32.4 250.8-190.2 309.2-205.3 58.3-15 95-28 147-2.2 52 26 121 62.8 82 95.2-38.8 32.5-54 41-54 41l91-51.8-201.2-119-402 248.8L1472.2 439l-380.5 252.8s-17.3 116.8 69.2 77.8c86.4-39 119-77.8 173-47.5 54 30.4 516.6 227 473.4 263.8-43.3 36.8-292 119-205.4 186 86.5 67 248.6 164.3 248.6 164.3s58.4 67 138.4 32.5c80-34.6 451.8-257.3 451.8-257.3 73.5-49.7 116.8-47.5 116.8-116.7s30.2-97.3-32.5-103.8c-62.6-6.5 26-103.8 71.5-151.3 45.4-47.6-28-129.7-95.2-101.6-67 28-281 80-382.6 26C2017 609.7 1922 538.2 1911 482c-10.7-56 13-30.2 71.5-25.8 58.4 4.3 17.3 69 95 71.3 78 2.2 266-8.6 309.3-64.8 43.2-56.3 60.5-114.6 23.7-90.8-36.7 23.6-106 69-194.5 58.2-88.7-10.8-162.2-45.4-190.3-90.8C1997.7 294 2231 147 2231 147" id="path4366" fill="none" stroke="#aaa" stroke-width="350" /> 
 
</svg>

唯一のことは、目に見えるストロークの下の領域であるように、私はこれをマスクになりたいです。 mask with textの動作と同様です。静的にする場合はアウトラインストロークを実行できますが、複雑なシェイプをアニメーション化することは、ダッシュオフセットをアニメートするよりもはるかに困難です。

私は完全に間違った考え方からこれに来ていますか？

私は、なぜあなたはマスクを使用しようとしなかったも同じ端

Answer 1

を達成するために異なるアプローチを使用するソリューションを開いていますか？

.journey-path{ 
 
    stroke-dasharray: 10961; 
 
    stroke-dashoffset: 10961; 
 
    animation: dash 10s linear forwards; 
 
} 
 

 
path{ 
 
    stroke-linecap:round; 
 
    stroke-linejoin:round; 
 
} 
 

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

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="svg2" viewBox="0 0 2730 1976"> 
 

 
    <mask id="journeymask"> 
 
    <rect width="100%" height="100%"/> 
 
    <path class="journey-path reveal" d="M1315 1302l-69.2 60.7s-43.2 28-17.3 32.4c26 4.4 166.5 13 183.8-17.2 17.3-30.3-15.2-125.4 8.6-151.3 23.7-26 320-199 320-199s49.6-23.7 54-49.7c4.3-26-473.5-257.2-473.5-257.2s-21.6-15.2-41-8.7c-19.6 6.4-588 348-588 348l-158-88.7c-9.2 3.7 153 81.6 153 81.6l356.7-214.2s99.5-23.8 88.6-73.5c-10.8-49.7-34.5-73.5 32.5-123.2 67-49.6 218.3-136 218.3-136s86.5-41.2 62.7-84.4c-23.8-43.3-147-86.5-129.7-119 17.3-32.4 250.8-190.2 309.2-205.3 58.3-15 95-28 147-2.2 52 26 121 62.8 82 95.2-38.8 32.5-54 41-54 41l91-51.8-201.2-119-402 248.8L1472.2 439l-380.5 252.8s-17.3 116.8 69.2 77.8c86.4-39 119-77.8 173-47.5 54 30.4 516.6 227 473.4 263.8-43.3 36.8-292 119-205.4 186 86.5 67 248.6 164.3 248.6 164.3s58.4 67 138.4 32.5c80-34.6 451.8-257.3 451.8-257.3 73.5-49.7 116.8-47.5 116.8-116.7s30.2-97.3-32.5-103.8c-62.6-6.5 26-103.8 71.5-151.3 45.4-47.6-28-129.7-95.2-101.6-67 28-281 80-382.6 26C2017 609.7 1922 538.2 1911 482c-10.7-56 13-30.2 71.5-25.8 58.4 4.3 17.3 69 95 71.3 78 2.2 266-8.6 309.3-64.8 43.2-56.3 60.5-114.6 23.7-90.8-36.7 23.6-106 69-194.5 58.2-88.7-10.8-162.2-45.4-190.3-90.8C1997.7 294 2231 147 2231 147" id="path4366" fill="none" stroke="white" stroke-width="350" /> 
 
    </mask> 
 
    
 
    <image width="2730.7" height="1976" preserveAspectRatio="none" xlink:href="http://i.stack.imgur.com/bHAUx.jpg" mask="url(#journeymask)"/> 
 
    
 
<path d="M1272.6 1162.4l57.7.8s-5.5-12.2 2.7-39.6c8.3-27.5 11.8-43.2 11.8-43.2l16.5-9 5-107 8-10.5-69.5-114.7-72 121.7 11.5 15.3 2.4 94.3 9.8 11s6.3 14.5 10.6 39.6c4.4 25 5.6 41.2 5.6 41.2z" id="path4364" fill="#fff" fill-rule="nonzero"/> 
 
    
 

 
</svg>