1

SVG clipPath を定義し、それをページのいくつかの DIV に適用しています。FF では期待どおりに動作/表示されますが、Chrome と Safari (すべての最新バージョン) では、HTML 要素がページの左上隅に配置されている場合にのみ、clipPath が 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 要素に適用できると言っているように聞こえますが、よくわかりません。

Illustrator から clipPath をエクスポートしたので、使用する必要がある別の単位/座標があった場合、どうすればよいかわかりません。

Chrome および/または Safari で、ページの左上以外の場所にある HTML 要素に SVG clipPath (実際のパスであり、ポリゴンや楕円ではない) を正常に適用した人はいますか?

4

3 に答える 3

0

Chrome と Opera の問題は修正されたばかりで、数週間以内に公開される予定です。実際、ブラウザーはページの起点で常に参照クリップを適用していました。新しい動作は Firefox と一致するはずです。

于 2016-06-23T14:45:35.363 に答える
0

この質問に対する答えを探しているときに、あなたの質問に出くわしました。「あなたはできない」という答えを含むすべての答えが、ちょっとした警官であることがわかりました。

私は試し続けました、そして私が見つけたのはこれです：

svg clipPath がある場合、私が知る限り、それは配置可能ではありませんが、それを iframe に放り込んで iframe を配置できることを考慮すれば、あなたは金色です。

私はリンクを含めていますが、私はサーバーの所有者ではないため、リンクが「爆発」するまでにどれくらいの時間がかかるかわかりません.

例

そのリンクの内容はかなり自明であり、それがもうアップしていない場合は、私にメッセージを送るか、この投稿に返信してください。私は自分のサーバーのどこかにアップデートを置きます.

于 2015-05-08T17:06:39.127 に答える