带有面具的 svg 在 chrome 上看不到答案

【问题标题】：svg with mask not seen on chrome带有面具的 svg 在 chrome 上看不到
【发布时间】：2019-04-05 02:40:01
【问题描述】：

我正在尝试使用 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) 反应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 属性代替内联掩码属性。

谁能告诉我在哪里寻找解决方案？

【问题讨论】：

标签： html css reactjs svg mask

【解决方案1】：

对于遇到类似问题的任何人，这里的解决方案都对我有用。通过上述问题描述中的 1) 和 2) 以及 viewBox 设置的掩码父级 svg 元素的大小，而不是 width 或 height 属性或 css 属性 (https://css-tricks.com/scale-svg/#article-header-id-2) 解决了该问题.

【讨论】：

【解决方案2】：

对于访问此页面的任何人，我都有同样的问题，我发现可以使用 mask-size 和 -webkit-mask-size 解决。

在你的 CSS 中执行此操作：

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

【讨论】：