質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

Firefox

Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

8873閲覧

svgファイルの画像でマスクをかける

x17kusyr

総合スコア7

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

Firefox

Mozilla Foundationによって作られた無料、オープンソース、クロスプラットフォームなウェブブラウザ

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/01/06 07:30

編集2017/01/06 10:06

###前提・実現したいこと
単純に長方形の画像に対してsvgファイルで作成した画像(角丸四角形)で切り抜いたようなマスクをかける作業を、全てのブラウザで適用されるようにしたいです。(※添付画像参照)
画像は任意の数多くの四角形画像に適用する必要があります。

もしsvg画像でのマスク(クリッピング?)が無理でしたら、代替案があればご提案いただければ幸いです。
イメージ説明

###発生している問題
現状ではChrome/safariでは問題なく表示されるのですが、FireFoxやIEでは適用されていません。

###試したこと
〇こちらのURLにある内容で、chrome/safariでの表示は問題なくできました。
http://qiita.com/HAKASHUN/items/fbd743336718c64bfe2a

〇FireFoxで表示されないかと以下のURLを参考にしたのですが、適用されませんでした。
https://hyper-text.org/archives/2016/06/firefox_47_release.shtml

###該当のソースコード

<div class="icon"> <img class="waku" src="sample.jpg"> </div>
.icon { position: relative; width: 50px; height: 50px; margin-right: 8px; } .icon img { position: absolute; top: 50%; left: 50%; -webkit-transform: translateY(-50%) translateX(-50%); transform: translateY(-50%) translateX(-50%); margin: 0; } .waku{ mask-image: url(/images/mask.svg); -webkit-mask-image: url(/images/mask.svg); mask-image: url(/images/mask.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center center; mask-position: center center; }

###補足情報
JSでsample画像は上下中央寄せになるようにしています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2017/01/06 08:43

質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。また、URLにはリンクを張ることができますので、編集よろしくお願いします。
x17kusyr

2017/01/06 10:07

質問初めてなもんで、勝手がわからずすみませんでした。
guest

回答1

0

ベストアンサー

Firefox の CSS Masks はインラインSVGのみサポートされているようです。

【Can I use... Support tables for HTML5, CSS3, etc】
http://caniuse.com/#feat=css-masks

【CSSとSVGを使ってWebページの要素にマスクをかける方法 - WPJ】
https://www.webprofessional.jp/masking-in-the-browser-with-css-and-svg/

インラインSVGでクリップしてしまう方法であれば IE10+ / Firefoxでも対応できそうです。

【CSSのみで画像のマスキング - Qiita】
http://qiita.com/C058/items/25f0c5e362ba7a5e99e3

【SVGクリッピングマスクにチャレンジ!静止画像も動画も、SVGで切り抜こう! | Webクリエイターボックス】(記事の最後の例のみIE可)
http://www.webcreatorbox.com/tech/svg-mask/

投稿2017/01/06 17:43

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x17kusyr

2017/01/10 11:06

回答ありがとうございました。 マスクをかけることには成功しましたが、現状では大きさの調整など上手くいっておりません。 実際のサイトに適用させるには現状ではブラウザが対応しきれていない感じがしました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問