1

SVGで作成された円にフィルターを追加しようとしていますが、フィルターを追加するとすぐに、円の上部と左側がトリミングされます。x、y、幅など、すべての設定を試してみましたが、かなり奇妙で予期しない結果になります。オンラインで例を見ると、それは彼らにとっても同じようです！たとえば、ここでW3の例を参照してくださいhttp://www.w3schools.com/svg/tryit.asp?filename=trysvg_fegaussianblur。うまく機能しているように見えますが、それは正方形であり、トリミングされていることがわからないためです。円に変更し、変更します。

rect width = "90" height = "90"stroke = "green"stroke-width = "3" fill = "yellow" filter = "url（＃f1）"

に

path filter = "url（＃f1）" fill = "none"stroke = "＃385370" d = "M87,15A72,72,0,1,1,86.99,15"stroke-width = "30"

そして突然、ビットがトリミングされています。私のサークルに何か問題はないと思いますか？何が原因で、すべての例でそれが行われているのに、なぜ他のレポートが見つからないのですか？！http://www.c-sharpcorner.com/UploadFile/99bb20/html5-inline-svg/も参照してください、彼らの例もそれを行います！ChromeとFirefoxの両方を探しています。

4

2 に答える 2

4

x、y、幅、高さを定義する必要があると思います。ここを見て：

<filter
   id="filter3755"
   inkscape:label="testfilter"
   x="-0.20000000000000001"
   y="-0.20000000000000001"
   height="1.3999999999999999"
   width="1.3999999999999999">
  <feGaussianBlur
     stdDeviation="3"
     id="feGaussianBlur3757" />
</filter>

値は、エレメントの位置と寸法に関連してフィルターが適用される領域を定義します。上記の例では、フィルターの原点は要素の -0.2% で、幅と高さは 1.4% です。

幸運を

編集：：

他の回答で述べたように、svg 自体も十分な大きさでなければなりません...

于 2012-09-07T08:41:17.277 に答える
1

<svg>コンテンツに対して十分な大きさになるように、外側の要素に高さを与えるだけです。例: height="300"。デフォルトは 300px x 150px で、サンプル パスには不十分です。

たとえば、height="200" のように大きくすると、rect でも同じことが起こります。

于 2012-09-07T08:40:56.390 に答える