วิธีใช้ SVG clipPath กับองค์ประกอบ HTML ที่ไม่ได้อยู่ที่มุมซ้ายบนของเอกสารในเบราว์เซอร์ webkit

ฉันได้กำหนด SVG clipPath และนำไปใช้กับ DIV บางส่วนบนเพจของฉัน มันทำงาน/แสดงผลตามที่คาดไว้ใน FF แต่ใน Chrome และ Safari (เวอร์ชันล่าสุดทั้งหมด) ดูเหมือนว่า clipPath จะมีผลกับองค์ประกอบ HTML เท่านั้นหากองค์ประกอบ HTML อยู่ในตำแหน่งมุมซ้ายบนของหน้า

วัตถุ SVG

<svg height="0" width="0">
    <defs>
        <clipPath id="clip">
            <path fill="#000000" d="M0,0.01c3.472,1.088,6.688,3.663,7.878,9.208c1.604,7.482,4.305,11.862,7.102,11.79v0.003
        c0.007,0.001,0.014-0.001,0.02-0.001c0.007,0,0.014,0.002,0.021,0.001v-0.003c2.797,0.072,5.499-4.308,7.103-11.79
        C23.312,3.672,26.527,1.098,30,0.01H0z"/>
        </clipPath>
    </defs>
</svg>

CSS สำหรับองค์ประกอบที่จะตัด

.clipMe {
    background: red;
    width: 30px;
    height: 21px;
    clip-path: url(#clip);
    -webkit-clip-path: url(#clip);
}

JSFIDDLE

ฉันเชื่อว่า บทความนี้ เริ่มแก้ไขปัญหานี้โดยใช้ระบบพิกัด แต่ฉันหลงทาง /สับสนอย่างรวดเร็วหลายครั้ง ดูเหมือนว่าจะบอกว่าการใช้หน่วยการวัดและพิกัดที่แตกต่างกัน คุณสามารถใช้ clipPath กับองค์ประกอบ HTML ใดก็ได้... แต่ฉันไม่แน่ใจจริงๆ

ฉันส่งออก clipPath ของฉันจาก Illustrator ดังนั้นหากมีหน่วย/พิกัดที่แตกต่างกันที่จำเป็นต้องใช้ ฉันไม่แน่ใจว่าจะทำอย่างไร

ใน Chrome และ/หรือ Safari มีใครประสบความสำเร็จในการใช้ SVG clipPath (นั่นคือเส้นทางจริง - ไม่ใช่รูปหลายเหลี่ยมหรือวงรี) กับองค์ประกอบ HTML ที่อยู่ที่อื่นนอกเหนือจากด้านซ้ายบนของหน้าหรือไม่