2

私はここでロープの終わりにいます。この「マスク」は正しく機能するはずですか？さて、私は疑い始めています。私の例はhttp://50.63.191.172/mask.htmlです。

他に何を試すことができるか本当にわかりません。私にはいくつかの制約があります：

  1. 複数の場所から使用されるため、svg を任意の html ページ / css スタイルシートの外部に配置したいと考えています。
  2. さまざまなサイズの複数のバージョンを持ちたくないので、事前に決められた svg 以外のサイズを使用したいと思います。ブラウザがキャッシュできるように、1 つだけ存在する必要があります。
  3. svg内で画像を指定できません。svg は、潜在的な画像に適用されるスタイルです。

これを機能させるために複数の方法を試しましたが、今のところうまくいきません。「-webkit-mask」プロパティを使用して、Chrome/Safari で問題なく動作します。マスキング四角形の幅と高さを絶対ピクセルで指定すると、firefox と「マスク」で「ある程度」成功しましたが、100% ではありません。私が望んでいることは実行可能ですか (Firefox の自動スケーリング マスク)? はいの場合、何が欠けていますか?

イライラする部分は、ページをリロードし続けると、画像がマスクされていないように見え、表示が終了した直後に消去されることがあります.

これが私のsvgです：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink">
 <defs>
  <mask id="c1">
   <g id="group">
     <linearGradient id="g" gradientUnits="objectBoundingBox" x2="0" y2="1">
       <stop stop-color="white" offset="0"/>
       <stop stop-color="white" stop-opacity="0" offset="1"/>
     </linearGradient>
     <rect x="0" y="0" width="100%" height="100%" fill="url(#g)" />
   </g>
  </mask>
 </defs>
 <use xlink:href="#group"/>
</svg>

そして、これは私のhtml/cssを組み合わせたものです:

<html lang="en">
<head>
 <meta charset=utf-8>
 <title>Testing mask in various browsers</title>
 <style>
  .masked {
   mask: url(mask.svg#c1);  /*Firefox */
   -webkit-mask: url('mask.svg'); /*Chrome, Safari */
  }
  .nob {
    border: none;
    outline: none;
  }
  div.stage { position: relative; }
.inline
{
  display: inline-block;
}
span.stage
{
  background-repeat: no-repeat;
  background-position: center;
  display: inline-block;
  position: absolute;
  left: 0px;
  top: 0px;
}
  .big { width:600px; height:588px; }
  .normal { width:300px; height:294px; }
  .small { width:150px; height:147px; }
 </style>
</head>
<body style="background-image: url(background.gif);">
 <div class="stage inline big">
  <a class="nob" href="mask.html"><img class="nob masked" src="b_pic.jpg"/></a>
 </div>
 <div class="stage inline normal">
  <a class="nob" href="mask.html"><img class="nob masked" src="pic.jpg"/></a>
 </div>
 <div class="stage inline small">
  <a class="nob" href="mask.html"><img class="nob masked" src="s_pic.jpg"/></a>
 </div>
</body>
</html>

私は何が欠けていますか？

4

1 に答える 1

2

FF はパーセントを実行しないことが判明しました。代わりに、0 から 1 の間の objectBoundingBox 単位で動作するのが好きです。まあ、Chrome/Safari はそれが好きではありません。しかし、違いを分ける方法があります。これが、次に最適化することを目指す現在の作業バージョンです。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <mask id="c1" maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
      <g id="group1">
        <linearGradient id="g1" gradientUnits="objectBoundingBox" x2="0" y2="1">
          <stop stop-color="white" offset="0"/>
          <stop stop-color="white" stop-opacity="0" offset="1"/>
        </linearGradient>
        <rect x="0" y="0" width="1" height="1" fill="url(#g1)" />
      </g>
    </mask>
    <mask id="c2">
      <g id="group2">
        <linearGradient id="g2" gradientUnits="objectBoundingBox" x2="0" y2="1">
          <stop stop-color="white" offset="0"/>
          <stop stop-color="white" stop-opacity="0" offset="1"/>
        </linearGradient>
        <rect x="0" y="0" width="100%" height="100%" fill="url(#g2)" />
      </g>
    </mask>
  </defs>
  <use xlink:href="#group2"/>
</svg>

ですから、それは可能です。

于 2013-05-29T04:42:23.897 に答える