带铬的面具的svg在镀铬上看不到 [英] svg with mask not seen on chrome

问题描述

我正在尝试使用 React 动态创建的一些 svg 路径进行屏蔽.问题在于，生成的html代码无法立即在Chrome和Safari上正确呈现.正确的结果显示在浏览器窗口调整大小上或从检查器中检查/取消检查样式属性.我觉得 -webkit 属性之一中的问题，但是无法定义哪个.尝试了 -webkit-mask，但没有给出任何结果.这是应该立即呈现的html结构:

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>

同样，在静态模式下，当将此HTML代码放置在Codepen或jsfiddle中时，渲染不会遇到任何问题，但是当用鼠标动态绘制mask元素内的路径时，就会发生此问题.如果没有遮罩，则动态绘制的路径将毫无问题地呈现.已经尝试过:

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

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)使用CSS mask 和 -webkit-mask 属性代替内联掩码属性.

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?

推荐答案

对于来到此页面的任何人，我都有相同的问题，发现可以使用 mask-size 和-webkit-mask-size .

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

在您的CSS中执行此操作:

do this in your css:

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

这篇关于带铬的面具的svg在镀铬上看不到的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！