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>