svgを使用した透過グラディエントマスク

svgについていくつかの助けが必要です。「背景画像」があります。別の「イメージ」がその上に置かれます。「画像」には、背景画像が輝くように穴が切られていなければなりません。私は、ブラウザの互換性のCSSの原因のマスクフィルタを使用することができませんでしたsvgを使用した透過グラディエントマスク

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
<title>Title of the document</title> 
 
<style> 
 
    body{ 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    } 
 
    #svg-door { 
 
    background-image: url(http://pcdn.500px.net/15548893/7f3b7c411716b1fb29c5cffb3efcf8ce33eacd76/15.jpg); 
 
    background-size: cover; 
 
    box-sizing: border-box; 
 
    padding: 100px; 
 
    width: 100%; 
 
    height: 500px; 
 
    } 
 
    #wood { 
 
    border-radius: 50%; 
 
    } 
 
</style> 
 
    </head> 
 
<body background="https://www.w3schools.com/css/img_fjords.jpg" > 
 
<svg xmlns="http://www.w3.org/2000/svg" id="svg-door"> 
 
    <defs> 
 
    <pattern id="wood" patternUnits="userSpaceOnUse" width="1024" height="768"> 
 
     <image xlink:href="http://i.imgur.com/Ljug3pp.jpg" x="0" y="0" width="1024" height="768"/> 
 
    </pattern> 
 
    </defs> 
 
    <path xmlns="http://www.w3.org/2000/svg" d=" M0,0 225,0 225,300 0,300 z M105,50, 180,50 180,80 105,80 z " 
 
     fill="url(#wood)" fill-rule="evenodd"/> 
 
</svg> 
 
</body>

：私は、SVGを使用することによって、これを達成しました。私はsvg/jsフレームワークを使いたくない。

これまでのところとても良いです。今私は一歩先に行きたいです。

この穴に透明なグラデーションが必要です。内側の矩形の境界線は現在のバージョンほど難しくありません。私はそれをする方法を知らない。

さらに、私は時間の経過とともに大きくなるようにこの穴をアニメーションしたいと思います。私はjsを使ってやります。別の方法がありますか？たぶん、HTMLの全体の構造を変更することによって？

何か助けていただければ幸いです。

出典

2017-08-01 nico 711

まず、SVG要素にマスクを適用しても問題はありません。 HTML要素に適用されるSVGマスクに関連するブラウザの互換性はありますが、SVG要素に適用される場合はありません。

事実、マスクは問題の明らかな解決策です。穴のソフトエッジを取得するには、矩形にぼかしフィルタを適用し、それをマスクとして使用して穴を作成します。質問のアニメーション部分については

body{ 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    } 
 
    #svg-door { 
 
    background-image: url(http://pcdn.500px.net/15548893/7f3b7c411716b1fb29c5cffb3efcf8ce33eacd76/15.jpg); 
 
    background-size: cover; 
 
    box-sizing: border-box; 
 
    padding: 100px; 
 
    width: 100%; 
 
    height: 500px; 
 
    } 
 
    #wood { 
 
    border-radius: 50%; 
 
    } 
 
<

<body background="https://www.w3schools.com/css/img_fjords.jpg" > 
 

 
<svg xmlns="http://www.w3.org/2000/svg" id="svg-door"> 
 
    <defs> 
 
    <pattern id="wood" patternUnits="userSpaceOnUse" width="1024" height="768"> 
 
     <image xlink:href="http://i.imgur.com/Ljug3pp.jpg" x="0" y="0" width="1024" height="768"/> 
 
    </pattern> 
 
    
 
    <mask id="hole"> 
 
     <rect width="100%" height="100%" fill="white"/> 
 
     <path d="M105,50, 180,50 180,80 105,80 z" filter="url(#hole-blur)"/> 
 
    </mask> 
 

 
    <filter id="hole-blur"> 
 
     <feGaussianBlur stdDeviation="2"/> 
 
    </filter> 
 
    </defs> 
 

 
    <path d="M0,0 225,0 225,300 0,300 z" fill="url(#wood)" mask="url(#hole)"/> 
 
</svg> 
 

 
</body>

出典

2017-08-01 10:21:20

、私の代わりに ''の 'を'使用することをお勧めして、あなたは非常に簡単に '、YをX ''の値をアニメーション化することができます'、' width'、 'height'（とにかく' d'をアニメーション化する方が簡単です） –

はい、私はアニメーション部分に答えるのを忘れましたが、Nietは正しいです。多分、長方形はアニメーション化する方が簡単です。 S.Oにはたくさんの質問があります。 SVG要素のアニメーション化について –

svgを使用した透過グラディエントマスク

答えて

関連する問題