我试图用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中时，我不会遇到渲染问题，但当用鼠标动态绘制mask元素内的路径时，问题就会出现。在没有遮罩的情况下，动态绘制的路径将在没有任何问题的情况下进行渲染。已尝试：
1( ReactforceReload()，假设问题与掩码元素<path id="type-1-area-0-path" ....></path>内的路径出现在路径引用掩码之后的事实有关<path id="type-2-area-0-path" d="M114.796875,..." ... mask="url(#mask)"></path>
2( 使用CSSmask和-webkit-mask属性代替内联掩码属性。
有人能告诉我在哪里可以找到解决方案吗？
对于任何来到这个页面的人，我都有同样的问题，我发现可以用mask-size和-webkit-mask-size解决。
在你的css中这样做：
width: 100%;
height: 100%;
mask-size: cover;
-webkit-mask-size: cover;
background-color:#000;
对于任何面临类似问题的人，这里有一个对我有效的解决方案。这个问题是通过上面问题描述中的1(和2(以及viewBox设置的掩码父svg元素的大小来解决的，而不是width或height属性或css属性(https://css-tricks.com/scale-svg/#article-头-id-2(。
对我来说，当我将mask属性：maskUnits从：userSpaceOnUse更改为objectBoundingBox(使用纯文本编辑器(时，它就开始工作了。