mask-test.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" height="1139" width="1417" style="position: relative; top: 265px; left: -175px;">
  <style>
    .m-isoline {
      fill: transparent;
      stroke: #4488ee;
      stroke-width: 3;
    }

    .m-isoline--car {
      stroke: red;
    }

    .m-isoline--bike {
      stroke: green;
    }

    .masked-isoline {
      fill: #4488ee;
      fill-opacity: .7;

    }

  </style>
  <defs>
    <g class="cluster-def">
      <path id="isoline-def__car__52.49887670592785,13.418598175048828" class="isoline-def" d="M279.1666666666667,592.5C290,578.3333333333333,300,552.6666666666666,306.5,535C313,517.3333333333333,316,507.66666666666663,323,513.6666666666666C330,519.6666666666666,341,541.3333333333333,352,552.1666666666666C363,563,373.99999999999994,563,386,563.3333333333333C397.99999999999994,563.6666666666666,410.99999999999994,564.3333333333333,424.4999999999999,559.6666666666666C437.99999999999994,555,451.99999999999994,545,460.6666666666666,538.6666666666666C469.33333333333326,532.3333333333333,472.66666666666663,529.6666666666666,481.16666666666663,522.8333333333334C489.66666666666663,516,503.33333333333326,505,518.5,493.49999999999994C533.6666666666666,482,550.3333333333333,470,564.3333333333333,461.33333333333326C578.3333333333333,452.66666666666663,589.6666666666666,447.33333333333326,602.3333333333333,441.33333333333326C615,435.33333333333326,629,428.66666666666663,636.1666666666666,425.5C643.3333333333333,422.3333333333333,643.6666666666666,422.66666666666663,651,428.8333333333333C658.3333333333333,435,672.6666666666666,447,688.3333333333334,461.3333333333333C704,475.66666666666663,721,492.3333333333333,739.6666666666666,503C758.3333333333333,513.6666666666666,778.6666666666666,518.3333333333333,790.8333333333333,522.3333333333333C803,526.3333333333333,807,529.6666666666666,815.4999999999999,538.8333333333334C824,548,837,563,850.6666666666665,584C864.3333333333333,605,878.6666666666665,632,890.6666666666665,660.5C902.6666666666665,689,912.3333333333333,719,918.3333333333333,749.8333333333333C924.3333333333333,780.6666666666666,926.6666666666665,812.3333333333333,928.8333333333333,835.5C930.9999999999999,858.6666666666666,932.9999999999999,873.3333333333333,932.4999999999998,879C931.9999999999999,884.6666666666666,928.9999999999999,881.3333333333333,917.3333333333331,874.8333333333333C905.6666666666665,868.3333333333333,885.3333333333333,858.6666666666666,871.3333333333333,851.8333333333333C857.3333333333333,845,849.6666666666665,841,839.6666666666665,854C829.6666666666665,867,817.3333333333333,897,805.1666666666666,909.8333333333333C793,922.6666666666666,781,918.3333333333333,766.1666666666666,916.8333333333333C751.3333333333333,915.3333333333333,733.6666666666666,916.6666666666666,716.5,929.6666666666665C699.3333333333333,942.6666666666666,682.6666666666666,967.3333333333333,665,971.3333333333333C647.3333333333333,975.3333333333333,628.6666666666666,958.6666666666666,617.1666666666666,947.8333333333333C605.6666666666666,937,601.3333333333333,932,590.1666666666666,917.5C579,903,561,879,550.8333333333334,866.6666666666666C540.6666666666666,854.3333333333333,538.3333333333333,853.6666666666666,535.6666666666666,852.6666666666666C533,851.6666666666666,530,850.3333333333333,527.5,849.3333333333333C525,848.3333333333333,523,847.6666666666666,519.6666666666666,846.5C516.3333333333333,845.3333333333333,511.66666666666663,843.6666666666665,505.66666666666663,841.9999999999999C499.66666666666663,840.3333333333333,492.3333333333333,838.6666666666666,484.16666666666663,837.4999999999999C476,836.3333333333333,467,835.6666666666666,453.16666666666663,840.8333333333333C439.3333333333333,846,420.66666666666663,857,402.5,850.9999999999999C384.3333333333333,845,366.66666666666663,822,349.49999999999994,801.6666666666666C332.3333333333333,781.3333333333333,315.66666666666663,763.6666666666666,305,739C294.3333333333333,714.3333333333333,289.66666666666663,682.6666666666666,284.16666666666663,663.1666666666667C278.66666666666663,643.6666666666666,272.3333333333333,636.3333333333333,262.66666666666663,629.9999999999999C252.99999999999997,623.6666666666666,239.99999999999997,618.3333333333333,236.49999999999994,615.5C232.99999999999997,612.6666666666666,238.99999999999997,612.3333333333333,247.8333333333333,610.8333333333333C256.66666666666663,609.3333333333333,268.3333333333333,606.6666666666666,279.1666666666667,592.5" />
      <path id="isoline-def__bike__52.49887670592785,13.418598175048828" class="isoline-def" d="M685.1666666666666,776.6666666666665C674,784.3333333333333,657,802.6666666666665,648.8333333333333,808.9999999999999C640.6666666666666,815.3333333333333,641.3333333333333,809.6666666666666,636.8333333333333,809.1666666666665C632.3333333333333,808.6666666666666,622.6666666666666,813.3333333333333,604.3333333333333,810.4999999999999C586,807.6666666666665,559,797.3333333333333,544.1666666666666,785.3333333333334C529.3333333333333,773.3333333333333,526.6666666666666,759.6666666666666,519.6666666666666,756.3333333333334C512.6666666666666,753,501.33333333333326,760,487.99999999999994,753.3333333333333C474.66666666666663,746.6666666666666,459.3333333333333,726.3333333333333,454.16666666666663,715.5C449,704.6666666666666,454,703.3333333333333,453,702.5C452,701.6666666666666,445,701.3333333333333,446.8333333333333,696.1666666666666C448.66666666666663,691,459.3333333333333,681,464.16666666666663,669.1666666666666C469,657.3333333333333,468,643.6666666666666,487.16666666666663,625.5C506.3333333333333,607.3333333333333,545.6666666666666,584.6666666666666,572.5,579.1666666666666C599.3333333333333,573.6666666666666,613.6666666666666,585.3333333333333,626.1666666666666,589C638.6666666666666,592.6666666666666,649.3333333333333,588.3333333333333,652.1666666666666,584.3333333333333C655,580.3333333333333,650,576.6666666666666,652.1666666666666,578C654.3333333333333,579.3333333333333,663.6666666666666,585.6666666666666,664.5,590.6666666666666C665.3333333333333,595.6666666666666,657.6666666666666,599.3333333333333,656.5,604.5C655.3333333333333,609.6666666666666,660.6666666666666,616.3333333333333,674.6666666666667,626.1666666666666C688.6666666666666,636,711.3333333333333,649,720.3333333333333,660C729.3333333333333,671,724.6666666666666,680,726.3333333333334,687.1666666666666C728,694.3333333333333,736,699.6666666666666,734.8333333333334,709.6666666666667C733.6666666666666,719.6666666666666,723.3333333333333,734.3333333333333,720.9999999999999,741.6666666666666C718.6666666666666,749,724.3333333333333,749,720.5,751.6666666666666C716.6666666666666,754.3333333333333,703.3333333333333,759.6666666666666,696.6666666666666,762.3333333333334C690,765,690,765,692.8333333333334,766.6666666666666C695.6666666666666,768.3333333333333,701.3333333333333,771.6666666666666,701.4999999999999,771.8333333333333C701.6666666666666,772,696.3333333333333,769,685.1666666666666,776.6666666666665" />
      <path id="isoline-def__publicTransport__52.49887670592785,13.418598175048828" class="isoline-def" d="M433.66666666666663,704C434.3333333333333,703.3333333333333,446.66666666666663,701.6666666666666,449.3333333333333,701.1666666666666C452,700.6666666666666,445,701.3333333333333,441.5,701.6666666666666C438,702,438,702,440.8333333333333,702.3333333333334C443.66666666666663,702.6666666666666,449.3333333333333,703.3333333333333,446.66666666666663,703.8333333333333C444,704.3333333333333,433,704.6666666666666,433.66666666666663,704M515,438.9999999999999C515,438.99999999999994,515,438.99999999999994,515,438.9999999999999C515,438.99999999999994,515,438.99999999999994,515,438.9999999999999M587.1666666666666,578.6666666666666C585.3333333333333,584.3333333333333,574.6666666666666,587.6666666666666,569.8333333333333,586.5C565,585.3333333333333,566,579.6666666666666,566.5,576.8333333333333C567,574,567,574,568.3333333333334,571.1666666666666C569.6666666666666,568.3333333333333,572.3333333333333,562.6666666666666,577.1666666666666,563.8333333333334C582,565,589,573,587.1666666666666,578.6666666666666M334,684.9999999999999C334,685,334,685,334,684.9999999999999C334,685,334,685,334,684.9999999999999M689,862.9999999999998C689,862.9999999999999,689,862.9999999999999,689,862.9999999999998C689,862.9999999999999,689,862.9999999999999,689,862.9999999999998M383.3333333333333,691.1666666666666C386,691,386,691,383.3333333333333,691.1666666666666C380.66666666666663,691.3333333333333,375.3333333333333,691.6666666666666,375.3333333333333,691.6666666666666C375.3333333333333,691.6666666666666,380.66666666666663,691.3333333333333,383.3333333333333,691.1666666666666M635,873.9999999999999C635,874,635,874,635,873.9999999999999C635,874,635,874,635,873.9999999999999M765.9999999999999,628.4999999999999C769,628,769,628,765.9999999999999,628.4999999999999C763,629,757,630,756.9999999999999,629.9999999999999C757,630,763,629,765.9999999999999,628.4999999999999M555.9999999999999,477C556,477,556,477,555.9999999999999,477C556,477,556,477,555.9999999999999,477M600.1666666666666,535.3333333333333C601.3333333333333,538.3333333333333,595.6666666666666,535.6666666666666,592.8333333333334,534.3333333333334C590,533,590,533,588.8333333333333,530C587.6666666666666,527,585.3333333333333,521,588.1666666666666,522.3333333333333C591,523.6666666666666,599,532.3333333333333,600.1666666666666,535.3333333333333M618,730C616.3333333333333,732.3333333333333,618.6666666666666,739.6666666666666,624.3333333333334,743C630,746.3333333333333,639,745.6666666666666,639,749C639,752.3333333333333,630,759.6666666666666,629.8333333333334,769.8333333333333C629.6666666666666,780,638.3333333333333,792.9999999999999,639.6666666666666,804.3333333333333C641,815.6666666666665,635,825.3333333333333,630.8333333333333,819.8333333333333C626.6666666666666,814.3333333333333,624.3333333333333,793.6666666666665,617.8333333333334,783.1666666666665C611.3333333333333,772.6666666666665,600.6666666666666,772.3333333333333,597,764C593.3333333333333,755.6666666666666,596.6666666666666,739.3333333333333,592.3333333333333,731.6666666666666C588,724,576,725,575.1666666666666,724C574.3333333333333,723,584.6666666666666,720,578.3333333333333,715.1666666666666C572,710.3333333333333,549,703.6666666666666,539.6666666666666,702.5C530.3333333333333,701.3333333333333,534.6666666666666,705.6666666666666,531.6666666666666,712C528.6666666666666,718.3333333333333,518.3333333333333,726.6666666666666,510.49999999999994,727.3333333333334C502.66666666666663,728,497.3333333333333,721,498.66666666666663,717.1666666666666C500,713.3333333333333,508,712.6666666666666,506.3333333333333,710C504.66666666666663,707.3333333333333,493.3333333333333,702.6666666666666,495.66666666666663,697.5C498,692.3333333333333,514,686.6666666666666,519.6666666666666,675.6666666666667C525.3333333333333,664.6666666666666,520.6666666666666,648.3333333333333,526,637.3333333333333C531.3333333333333,626.3333333333333,546.6666666666666,620.6666666666666,552.8333333333333,621C559,621.3333333333333,556,627.6666666666666,563.4999999999999,632.8333333333333C571,638,589,642,603.3333333333333,650.9999999999999C617.6666666666666,660,628.3333333333333,674,637.3333333333333,680.8333333333333C646.3333333333333,687.6666666666666,653.6666666666666,687.3333333333333,657.8333333333333,682.3333333333333C662,677.3333333333333,663,667.6666666666666,668.3333333333333,666.6666666666666C673.6666666666666,665.6666666666666,683.3333333333333,673.3333333333333,684.5,678C685.6666666666666,682.6666666666666,678.3333333333333,684.3333333333333,678.6666666666666,684.3333333333333C679,684.3333333333333,687,682.6666666666666,687,682.8333333333334C687,683,679,685,683.5,683.8333333333334C688,682.6666666666666,705,678.3333333333333,711.5,672.9999999999999C718,667.6666666666666,714,661.3333333333333,719.6666666666666,659C725.3333333333333,656.6666666666666,740.6666666666666,658.3333333333333,747.1666666666667,663.8333333333333C753.6666666666666,669.3333333333333,751.3333333333333,678.6666666666666,743.4999999999999,686.1666666666666C735.6666666666666,693.6666666666666,722.3333333333333,699.3333333333333,715.1666666666666,697.8333333333333C708,696.3333333333333,707,687.6666666666666,700.1666666666666,688.8333333333333C693.3333333333333,690,680.6666666666666,701,667.6666666666666,705.8333333333333C654.6666666666666,710.6666666666666,641.3333333333333,709.3333333333333,635.8333333333334,712.5C630.3333333333333,715.6666666666666,632.6666666666666,723.3333333333333,628.3333333333334,724.4999999999999C624,725.6666666666666,613,720.3333333333333,607.5,717.6666666666666C602,715,602,715,606.8333333333333,717.9999999999999C611.6666666666666,721,621.3333333333333,727,623.3333333333334,728.6666666666666C625.3333333333333,730.3333333333333,619.6666666666666,727.6666666666666,618,730" />
    </g>
  </defs>
  <g class="masks-group" />

  <g class="leaflet-zoom-hide clusters-container" transform="translate(175,-265)">
    <g transform="translate(100, 30)" class="cluster-mask-group">
      <mask class="isoline-mask" id="isoline-mask__bike__publicTransport__52.49887670592785,13.418598175048828">
        <rect width="100%" height="100%" x="0" y="0" fill="#fff" />
        <use class="isoline-use-plain" xlink:href="#isoline-def__bike__52.49887670592785,13.418598175048828" />
        <use class="isoline-use-plain" xlink:href="#isoline-def__publicTransport__52.49887670592785,13.418598175048828" />
      </mask>
      <mask class="isoline-mask" id="isoline-mask__car__publicTransport__52.49887670592785,13.418598175048828">
        <rect width="100%" height="100%" x="0" y="0" fill="#fff" />
        <use class="isoline-use-plain" xlink:href="#isoline-def__car__52.49887670592785,13.418598175048828" />
        <use class="isoline-use-plain" xlink:href="#isoline-def__publicTransport__52.49887670592785,13.418598175048828" />
      </mask>
      <mask class="isoline-mask" id="isoline-mask__car__bike__52.49887670592785,13.418598175048828">
        <rect width="100%" height="100%" x="0" y="0" fill="#fff" />
        <use class="isoline-use-plain" xlink:href="#isoline-def__car__52.49887670592785,13.418598175048828" />
        <use class="isoline-use-plain" xlink:href="#isoline-def__bike__52.49887670592785,13.418598175048828" />
      </mask>
    </g>

    <g class="cluster">
      <use class="m-isoline--car m-isoline" xlink:href="#isoline-def__car__52.49887670592785,13.418598175048828" />
      <use class="m-isoline--bike m-isoline" xlink:href="#isoline-def__bike__52.49887670592785,13.418598175048828" />
      <use class="m-isoline--publicTransport m-isoline" xlink:href="#isoline-def__publicTransport__52.49887670592785,13.418598175048828"/>

      <g mask="url(#isoline-mask__bike__publicTransport__52.49887670592785,13.418598175048828)">
        <use xlink:href="#isoline-def__car__52.49887670592785,13.418598175048828" class="masked-isoline" />
      </g>

      <g mask="url(#isoline-mask__car__publicTransport__52.49887670592785,13.418598175048828)">
        <use xlink:href="#isoline-def__bike__52.49887670592785,13.418598175048828" class="masked-isoline" />
      </g>

      <g mask="url(#isoline-mask__car__bike__52.49887670592785,13.418598175048828)">
        <use xlink:href="#isoline-def__publicTransport__52.49887670592785,13.418598175048828" class="masked-isoline" />
      </g>
    </g>
  </g>
</svg>