SVG Clipping-Pfad ist falsch positioniert, wenn sie als CSS-Clip-Pfad-Eigenschaft verweist

Question

ich diesen Code Stift einrichten: http://codepen.io/jasonpearson/pen/pjKwBZ

Wenn Sie die -webkit-clip-Pfad Eigenschaft Kommentar-, können Sie die Maske sehen ist kleiner und nicht zentriert wie es ist, wenn es auf das SVG angewendet wird. Wie kann ich einstellen, so dass die Schnittmaske die gleiche zeigt, wenn sie mit CSS oder SVG angewendet wird?

<style> 
    * { 
    padding: 0; 
    margin: 0; 
    } 

    svg { 
    border: 1px dotted black; 
    } 

    #myDiv { 
    background: blue; 
    max-width: 500px; 
    //-webkit-clip-path: url('/#myClipPath') 
    } 
</style> 

<div id="myDiv"> 
    <svg viewBox="0 0 100 100"> 
    <defs> 
     <clipPath id="myClipPath"> 
     <circle cx="50" cy="50" r="30"/> 
     </clipPath> 
    </defs> 

    <rect x="0" y="0" height="100" width="100" fill="yellow" clip-path="url(#myClipPath)" /> 
    </svg> 
</div> 

Answer 1

Sie können die clipPath wechseln Koordinaten auf der Basis der objectBoundingBox, anstelle von absoluten Koordinaten.

* { 
 
    padding: 0; 
 
    margin: 0; 
 
    } 
 

 
    svg { 
 
    border: 1px dotted black; 
 
    } 
 

 
    #myDiv { 
 
    background: blue; 
 
    max-width: 500px; 
 
    -webkit-clip-path: url('/#myClipPath') 
 
    }

<div id="myDiv"> 
 
    <svg viewBox="0 0 100 100"> 
 
    <defs> 
 
     <clipPath id="myClipPath" clipPathUnits="objectBoundingBox"> 
 
     <circle cx="0.5" cy="0.5" r="0.3"/> 
 
     </clipPath> 
 
    </defs> 
 

 
    <rect x="0" y="0" height="100" width="100" fill="yellow" clip-path="url(#myClipPath)" /> 
 
    </svg> 
 
</div>