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

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

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

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

Inkscape

Inkscape(インクスケープ)はオリジナル画像やオリジナルロゴの作成、写真の加工が出来るソフトです

Q&A

解決済

1回答

1328閲覧

SVGの<mask>で透過度を調整したい

DDD4

総合スコア0

SVG

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

Inkscape

Inkscape(インクスケープ)はオリジナル画像やオリジナルロゴの作成、写真の加工が出来るソフトです

0グッド

0クリップ

投稿2021/08/20 14:01

編集2021/08/21 02:21

前提・実現したいこと

SVGのPathに<mask>を利用しマスクをかけ、テキストの透過度を調整したい。
※最終的に一筆書きのアニメーションを実現したいためです。

・透過度を調整される側:<g id="text8105">
・マスクに使う側:<mask id="mask">

宜しくお願い致します。

発生している問題・エラーメッセージ

<mask></mask>で囲んだPathにマスクがかかるのではなく、全て見えなくなってしまった。
・mask: url(#mask);で#text8105を紐づけると、#text8105も見えなくなってしまう。

該当のソースコード

<svg width="83.23175811767578" height="41.88594436645508" viewBox="0 0 83.231759 41.885946" version="1.1" id="svg7625" inkscape:version="1.1 (c68e22c387, 2021-05-23)" sodipodi:docname="描画.svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <g inkscape:label="レイヤー 1" inkscape:groupmode="layer" id="layer1" transform="translate(-51.884118,-129.45358)"> <g aria-label="test" transform="matrix(0.41528567,0,0,0.49893832,-37.501138,-118.91737)"id="text8105" style="font-size:74.6667px;line-height:1.25;-inkscape-font-specification:'sans-serif, Normal';letter-spacing:0px;word-spacing:0px;white-space:pre;"> <path d="m 274.47267,559.48658 q -1.93229,0.51042 -4.22917,0.83854 -2.26042,0.32813 -4.04688,0.32813 -6.23437,0 -9.47917,-3.35417 -3.24479,-3.35417 -3.24479,-10.75521 v -21.65626 h -4.63021 v -5.76042 h 4.63021 v -11.70313 h 6.85417 v 11.70313 h 14.14584 v 5.76042 h -14.14584 v 18.5573 q 0,3.20833 0.14583,5.03125 0.14584,1.78646 1.02084,3.35417 0.80208,1.45833 2.1875,2.15104 1.42187,0.65625 4.30208,0.65625 1.67709,0 3.5,-0.47396 1.82292,-0.51041 2.62501,-0.83854 h 0.36458 z" id="path9195" class="svg-elem-2"></path> <path d="m 316.83727,540.20011 h -30.00522 q 0,3.75521 1.13021,6.56251 1.13021,2.77083 3.09896,4.55729 1.89583,1.75 4.48438,2.625 2.625,0.875 5.76041,0.875 4.15626,0 8.34897,-1.64062 4.22917,-1.67709 6.01563,-3.28125 h 0.36458 v 7.47396 q -3.46354,1.45833 -7.07292,2.44271 -3.60938,0.98437 -7.58334,0.98437 -10.13542,0 -15.82292,-5.46875 -5.68751,-5.50521 -5.68751,-15.60417 0,-9.98959 5.4323,-15.85939 5.46875,-5.86979 14.36459,-5.86979 8.23959,0 12.68751,4.8125 4.48437,4.8125 4.48437,13.67188 z m -6.67188,-5.25 q -0.0365,-5.39583 -2.73437,-8.34896 -2.66146,-2.95313 -8.13021,-2.95313 -5.50522,0 -8.78647,3.2448 -3.24479,3.24479 -3.68229,8.05729 z" id="path9197" class="svg-elem-3"></path> <path d="m 356.32167,548.11158 q 0,5.57812 -4.63021,9.15104 -4.59376,3.57292 -12.57813,3.57292 -4.52084,0 -8.31251,-1.05729 -3.75521,-1.09375 -6.30729,-2.36979 v -7.69272 h 0.36458 q 3.24479,2.44271 7.21875,3.90105 3.97396,1.42187 7.6198,1.42187 4.52083,0 7.07292,-1.45833 2.55208,-1.45834 2.55208,-4.59375 0,-2.40625 -1.38541,-3.64584 -1.38542,-1.23958 -5.32292,-2.11458 -1.45834,-0.32813 -3.82813,-0.76563 -2.33333,-0.4375 -4.26563,-0.94792 -5.35937,-1.42187 -7.61979,-4.15625 -2.22396,-2.77083 -2.22396,-6.78125 0,-2.51563 1.02083,-4.73959 1.05729,-2.22396 3.17188,-3.97396 2.04167,-1.71354 5.17708,-2.69791 3.17188,-1.02084 7.07293,-1.02084 3.64583,0 7.36458,0.91146 3.75521,0.875 6.23438,2.15104 v 7.32813 h -0.36458 q -2.625,-1.93229 -6.38022,-3.24479 -3.75521,-1.34896 -7.36458,-1.34896 -3.75521,0 -6.34375,1.45833 -2.58855,1.42188 -2.58855,4.26563 0,2.51563 1.56771,3.79167 1.53125,1.27604 4.95834,2.07812 1.89583,0.43751 4.22917,0.87501 2.36979,0.4375 3.9375,0.80208 4.77604,1.09375 7.36458,3.75521 2.58855,2.69792 2.58855,7.14584 z" id="path9199" class="svg-elem-4"></path> <path d="m 387.27481,559.48658 q -1.93229,0.51042 -4.22917,0.83854 -2.26042,0.32813 -4.04688,0.32813 -6.23437,0 -9.47917,-3.35417 -3.24479,-3.35417 -3.24479,-10.75521 v -21.65626 h -4.63021 v -5.76042 h 4.63021 v -11.70313 h 6.85417 v 11.70313 h 14.14584 v 5.76042 h -14.14584 v 18.5573 q 0,3.20833 0.14583,5.03125 0.14584,1.78646 1.02084,3.35417 0.80208,1.45833 2.1875,2.15104 1.42187,0.65625 4.30208,0.65625 1.67709,0 3.5,-0.47396 1.82292,-0.51041 2.62501,-0.83854 h 0.36458 z" id="path9201" class="svg-elem-5"></path> </g>   <mask id="mask"> <path style="fill: none; stroke: rgb(0, 255, 255); stroke-width: 40; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 4; stroke-opacity: 1;" d="m 52.344827,151.34483 82.310343,-1.89656" id="path9255" class="svg-elem-6"></path> ** </mask>** </g> </svg>
#text8105 { mask: url(#mask); }

試したこと

・strokeの色の変更。
・maskをmask-imageに変更しても変わらず。
・inkscapeでsvg生成しているので、inkscapeでもmaskがかからない様な書き出しをしたのかと思いましたが、inkscape内ではきちんとマスクの効果が表れます。

補足情報(FW/ツールのバージョンなど

・inkscapeでSVG生成後、SVG Artistaでアニメーションをつけ、そのSVG codeを上記に記載しています。
※アニメーションのcodeは今回の質問には不要の為に未記載。

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

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

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

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

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

guest

回答1

0

自己解決

透過度を調整される側のPathのfillに色指定をしてら解決しました。

投稿2021/08/22 09:57

DDD4

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.47%

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

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

質問する

関連した質問