1

次の実装を使用して、SVG といくつかの CSS を使用して要素をマスクしています。

//styles.css
.elementToBeMasked {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    display: block;
    overflow: hidden;
    clip-path:url(rhombus.svg#rhombusclip); 
    -webkit-mask:url(rhombus.svg#rhombus); 
    -webkit-mask-repeat:no-repeat;
} ...

//rhombus.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
  <clipPath id="rhombusclip">
    <path id="rhombuspath" d="M0,0 L500,0 500,500 100,500 z" fill="#000000" />
  </clipPath>
  <path id="rhombus" d="M0,0 L500,0 500,500 100,500 z" fill="#000000" />
</svg>

これは、Chrome、Safari、および Firefox で正常に機能します。ただし、いくつかのプロパティをアニメーション化することを望んでいるので、SVG を HTML にインライン化しようとしています。

これは私のインライン SVG コードです:

//index.html
<div class="elementToBeMasked">...</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
    <clipPath id="rhombusclip">
      <path id="rhombuspath" d="M0,0 L500,0 500,500 100,500 z" fill="#000000" />
    </clipPath>
    <path id="rhombus" d="M0,0 L500,0 500,500 100,500 z" fill="#000000" />
</svg>

そして、これは私の更新された CSS です。

 //styles.css
 .elementToBeMasked {
     ...
     clip-path:url(index.html#rhombusclip); 
     -webkit-mask:url(index.html#rhombus);
 }

この実装は、どのブラウザーでも機能しません。どんな提案でも大歓迎です。

4

2 に答える 2

1

と書く#rhombusclipとstyles.css、実際には and の省略形であり、ファイルにstyles.css#rhombusclipないため、検索は失敗します。#rhombusclipstyles.css

index.html#rhombusclip代わりに書き込み、他の参照についても同じことを行う必要があります。

これは w3c CSS 標準が述べていることであり、Webkit を除いて私が知っているすべての UA はこのように機能します。Webkit は奇妙なものなので、ある時点で変更されると思います。

于 2013-11-27T09:27:31.117 に答える