Mask with <line> not showing up on device, works on Simulator

[hellosebby]

I have a mask and am using <line> to give a graph some background color

It works fine on the simulator, but when I tested it out on my device it didn't work. The SVG looks like this:

  <svg id="hrm-graph">

      <mask id="graph-mask">

        <line x1="0%" y1="0%" x2="100%" y2="100%" stroke-width="6" fill="#ffffff"/>

      </mask>

      <svg mask="#graph-mask">

        <rect id="hard" x="0" y="0" width="100%" height="35%" fill="#ed3d17"/>

        <rect id="med" x="0" y="35%" width="100%" height="15%" fill="#fc8c25"/>

        <rect id="low" x="0" y="50%" width="100%" height="25%" fill="#f8d02b"/>

        <rect id="rest" x="0" y="75%" width="100%" height="25%" fill="#52c6ca"/>

      </svg>

I am using an arc mask in another section and that works fine. I'm not sure if there's some odd limitation around it or something? I can't find any details

[Krish_2009]

It is a known error where you cannot use an <line> element inside of masks. Use <rect> element instead. 🙂

If this answer works please mark this post as a Best Answer.  ~ K.K Designs