Pourquoi mon clip-path ne fonctionne pas lorsque la source est un fichier svg?

Je suis à la suite de la mozilla documentation sur l'utilisation de css clip-path propriété pour appliquer une svg clipPath à un HTMLElement. Mais pour une raison quelconque, il ne fonctionne pas pour moi, pas dans la div et pas dans les images.

Dans la documentation, il est dit que vous pouvez facilement couper un élément avec ce code:

<style>.target { clip-path: url(#c1); }</style>
<svg:svg height="0">
  <svg:clipPath id="c1" clipPathUnits="objectBoundingBox">
    <svg:circle cx="0.25" cy="0.25" r="0.25" id="circle"/>
    <svg:rect x="0.5" y="0.2" width="0.5" height="0.8"/>
  </svg:clipPath>
</svg:svg>

Et j'ai essayé, mais ça ne fonctionne pas. Le clip-path propriété fonctionne avec des méthodes prédéfinies comme un polygone() et de l'ellipse() mais il ne fonctionne pas avec un lien svg.

J'ai fait un JSFiddle illustrer mon problème, j'espère que vous pouvez trouver mon erreur 🙂

De quoi êtes-vous tester? Google Chrome dispose d'une restriction actuelle, il ne clip contenu html avec l'url de chemins de détourage. Aussi le contenu ci-dessus est xhtml (c'est préfixée) afin de ne pas travailler dans un jsfiddle.

OriginalL'auteur undefined | 2014-12-30