svg with mask not seen on chrome

问题

I'm trying to mask with some svg path that is created dynamically with React. The problem is that the resulted html code doesn't render properly on Chrome and Safari immediately. Correct results appear on browser window resize or check/uncheck of a style property from inspector. I feel like the problem in one of the -webkit properties but can't define which. Tried -webkit-mask, but it didn't give any results. Here's the html structure that should render right away:

<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>

Again, in static mode when this HTML code is placed in codepen or jsfiddle I face no issues with render, but the problem happens when a path inside mask element is drawn dynamically with mouse. Without mask dynamically drawn paths are rendered without any issues. Already tried:

1) React forceReload() assuming the problem is related to the fact that the path inside mask element <path id="type-1-area-0-path" ....></path> appears after the path referencing mask <path id="type-2-area-0-path" d="M114.796875,..." ... mask="url(#mask)"></path>

2) Instead of inline mask attribute use CSS mask and -webkit-mask properties.

Could anyone give me a hint where to look for a solution?

回答1:

For anyone who faces a similar problem here's the solution that worked for me. The problem was solved by a combination of 1) and 2) from the above problem description AND the size of the mask parent svg element set by viewBox, not width or height attributes or css properties (https://css-tricks.com/scale-svg/#article-header-id-2).

回答2:

For anyone who came to this page, I have same problem and I found can fix with mask-size and -webkit-mask-size.

do this in your css:

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

来源：https://stackoverflow.com/questions/53091685/svg-with-mask-not-seen-on-chrome