0
私は、フィルタを介して追加された画像を持つパスを持っています。 はまた、パスは次のように設定した背景色があります。画像フィルタはあるが透明な背景を持つSVGパス
myPath.css('fill', bgColour);
を私の質問は、透明のパスを持っていますが、目に見える画像を維持することができる方法ですか?
私はfill: transparent
、fill-opacity: 0
、fill: rgba(0, 0, 0, 1)
を試しましたが、これらの画像も見えなくなります。ここで
は私の現在のコードです:
var filter = svg.filter(defs, 'myFilter', 0, 0, '100%', '100%', filterOptions);
var sourcePathRef = 'SourceGraphic';
if (hasTransparentBackground()) {
// make path transparent
svg.filters.colorMatrix(filter, 'TransformedGraphic', sourcePathRef, 'matrix', [
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0],
[0, 0, 0, 0, 0]
]);
sourcePathRef = 'TransformedGraphic';
}
// add the image
var outputSlot = 'customImage';
svg.filters.image(filter, outputSlot, imageFile, {
preserveAspectRatio: aspectRatio
});
// move it
svg.filters.offset(filter, 'movedImage', outputSlot, moveX, moveY);
// combine image with path for clipping
svg.filters.composite(filter, 'clip', 'in', 'movedImage', sourcePathRef);
// mix both images
svg.filters.blend(filter, '', 'normal', 'clip', sourcePathRef);
// apply the filter
imageSlot.attr('filter', 'url(#myFilter)');
:-)フィルタリング最後(ブレンド)をスキップ? –
イメージがパスよりも小さい場合は、パスの残りの領域を色で塗りつぶすのではなく、SVGファイルの背後にあるもの(たとえば背景イメージ)を表示します。 – Guite
イメージを直接イメージとして描画し、それをパスにクリップするのはなぜですか? –