带有遮罩的svg在chrome上看不到

Question

我试图用一些用React动态创建的svg路径来屏蔽。问题是，生成的html代码不能立即在Chrome和Safari上正确呈现。在浏览器窗口调整大小或选中/取消选中检查器中的样式属性时，会显示正确的结果。我觉得问题出在某个-webkit属性中，但不能定义是哪个属性。尝试了-webkit-mask，但没有给出任何结果。下面是应该立即呈现的html结构：

​

<div>
  <div id="type-1-areas-container">
    <div class="drawArea" id="draw-area-type-1-area-0" style="z-index: 1;">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="width: 100%; height: 100%; top: 0px; left: 0px;">
        <mask id="mask"><rect x="0" y="0" width="100%" height="100%" fill="#fff"></rect>
          <svg class="path-svg type-1-area" id="type-1-area-0" xmlns="http://www.w3.org/2000/svg" transform="scale(1)" style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px;">
            <path id="type-1-area-0-path" class="svg-path type-1-area-path" d="M127.796875,155C132.95551452636718,162.82513122558595,138.23039932250975,168.82151107788087,142.18780517578125,172.16754150390625S150.95073318481445,176.28356399536133,154.17958068847656,177.30686950683594S161.0159019470215,179.71168899536133,163.7134552001953,178.9895782470703S169.75318450927733,178.6121047973633,172.16326904296875,172.4927978515625S179.8039924621582,147.7889892578125,179.7806854248047,138.19419860839844S175.28107757568358,115.13227272033691,172.0078887939453,108.52752685546875S164.28795928955077,96.4549690246582,157.9594268798828,94.16255950927734S134.72670631408693,93.14690742492675,129.8176727294922,93.24479675292969S128.5356559753418,90.80187454223633,125.23253631591797,94.81515502929688S107.4122241973877,110.97227325439454,107.796875,120S122.63823547363282,147.17486877441405,127.796875,155" style="fill: rgb(0, 0, 0); stroke: rgb(255, 255, 0); stroke-width: 2px; stroke-linejoin: miter; stroke-linecap: round;"></path>
          </svg>
        </mask>
      </svg>
    </div>
  </div>
  <div id="type-2-areas-container">
    <div class="drawArea" id="draw-area-type-2-area-0" style="z-index: 0;">
      <svg class="path-svg type-2-area" id="type-2-area-0" xmlns="http://www.w3.org/2000/svg" transform="scale(1)" style="position: absolute; width: 100%; height: 100%; top: 0px; left: 0px;">
        <path id="type-2-area-0-path" class="svg-path type-2-area-path" d="M114.796875,179C114.14320793151856,178.26720504760743,105.84552307128907,165.58406829833984,110.43909454345703,174.1147003173828S134.835990524292,220.88421707153321,145.42068481445312,235.87088012695312S170.70931396484374,265.35510711669923,181.00372314453125,274.0257873535156S206.31416854858398,289.6967575073242,214.05007934570312,293.6754150390625S225.51683044433594,299.6501159667969,232.5764617919922,300.5501708984375S254.67742385864258,301.13958129882815,261.1142883300781,299.67578125S271.82720336914065,295.42576599121094,275.4888916015625,290.79150390625S282.5870529174805,277.52045288085935,285.5255432128906,268.78070068359375S293.53660736083987,240.60151138305665,295.0788269042969,232.5264892578125S296.2962417602539,220.4813331604004,295.8070068359375,214.9472198486328S300.125959777832,208.6973476409912,291.8172607421875,195.6324005126953S252.8830108642578,142.17305183410645,240.41567993164062,127.84757232666016S218.41261672973633,106.83093719482422,208.70172119140625,100.12920379638672S189.46759185791015,85.5236831665039,175.67637634277344,83.16934967041016S129.72834587097168,83.31731033325195,116.76028442382812,84.43364715576172S94.4289478302002,87.4200668334961,89.2226333618164,90.6115951538086S82.60472297668457,99.19609413146972,82.05152130126953,105.71050262451172S83.84109344482422,127.42914161682128,85.53462219238281,134.04098510742188S88.95237503051757,143.0456069946289,93.34171295166016,149.78945922851562S111.57860069274902,174.61841888427733,114.796875,179S115.45054206848144,179.73279495239257,114.796875,179" style="stroke: rgb(186, 112, 0); stroke-width: 2px; stroke-linejoin: miter; stroke-linecap: round; fill: rgb(186, 112, 0); fill-opacity: 0.3;" mask="url(#mask)"></path>
      </svg>
    </div>
  </div>
</div>

​

同样，在静态模式下，当这段HTML代码放在codepen或jsfiddle中时，我不会遇到渲染的问题，但当用鼠标动态绘制掩码元素内的路径时，问题就会发生。在没有遮罩的情况下，动态绘制的路径将不会出现任何问题。已尝试：

1) React forceReload()假设问题与掩码元素<path id="type-1-area-0-path" ....></path>内的路径出现在路径引用掩码<path id="type-2-area-0-path" d="M114.796875,..." ... mask="url(#mask)"></path>之后的事实有关

2)使用CSS mask和-webkit-mask属性而不是内联掩码属性。

谁能给我一个提示，到哪里去寻找解决方案？

Answer 1

对于任何来到这个页面的人，我都有同样的问题，我发现可以用mask-size和-webkit-mask-size来修复。

width: 100%;
height: 100%;
mask-size: cover;
-webkit-mask-size: cover;
background-color:#000;

Answer 2

对于任何面临类似问题的人，这里有一个对我有效的解决方案。根据上述问题描述和由viewBox设置的掩码父svg元素的大小，而不是width或height属性或css属性(https://css-tricks.com/scale-svg/#article-header-id-2)，1)和2)的组合解决了问题。