おしえて

SVGのmask要素について

解決済

質問者：apricot1101
質問日時：2021/06/04 16:45
回答数：1件

vivus.jpを使って文字のなぞり書きをしようとしています。

テキストをシェイプ化しsvg形式で保存したもの(base.svg)のうえに
一画一画をパスに表しsvg形式で保存したもの(mask.svg)をマスクする方法をとろうとしています。
現在、base.svg、mask.svgそれぞれ単独でvivus.jpを使って表示するところまでできましたが、
mask要素を使うと、真っ白い画面になり、何も表示されません。

mask要素の基本的な何かが抜けているのかと、何か確認する箇所ございましたら
教えて頂けますか。

※mask要素をコメントアウトすると「う」の文字が表示されます。

<head>
<meta charset="UTF-8">
<title>test</title>
<style>
.str{fill:#000000;stroke:#000000;stroke-width:10;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:0;stroke-miterlimit:4;stroke-dasharray:none;
}
</style>
</head>

<body>
<div class="svgwrap">
<svg
width="210mm" height="297mm" viewBox="0 0 210 297" version="1.1" id="mask" xmlns="http://www.w3.org/2000/svg"
xmlns:="http://www.w3.org/1999/xlink">
<image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="base.svg" width="210" height="297" mask="url(#clipmask)"></image>

<mask id="clipmask" maskUnits="objectBoundingBox">
<path
class="str"
d="m 96.151,29.876 c 11.479,5.648 22.949,11.293 26.619,14.789 3.66,3.495 -0.48,4.835 -5.08,7.694 -4.6,2.86 -9.66,7.243 -14.72,11.624"
/>
<path
class="str"
d="m 70.725,86.306 c -0.655,1.103 -1.309,2.204 0.927,3.243 2.236,1.038 7.354,2.013 15.949,0.489 8.594,-1.525 20.669,-5.55 27.189,-4.511 6.52,1.038 7.49,7.135 6.46,17.373 -1.04,10.24 -4.08,24.63 -6.34,33.22 -2.25,8.6 -3.71,11.4 -6.58,13.54 -2.87,2.13 -7.13,3.6 -11.153,5.02 -4.021,1.42 -7.794,2.8 -11.567,4.18"
/>
</mask>

</svg>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/vivus.js"></script>
<script>
new Vivus('mask', {duration: 100 , start: 'autostart', type: 'oneByOne'});

</script>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： Ogre7077
回答日時：2021/06/04 19:44

マスク方法ですが、

透過性(alpha) と明度(luminance) の二種類があり、
おそらくは現在は明度が指定されている状態です

https://developer.mozilla.org/ja/docs/Web/CSS/ma …

> 初期値 match-source

> match-source
> mask-image プロパティが <mask-source> 型であれば、
> マスクレイヤー画像の明度の値がマスクの値として使用されます。

マスク用の描線は stroke:#000 で行っていますが、
これは明度 0 なのでマスクすると背景画像が消えてしまいます。

対策としては、以下のどちらかをお勧めします。
* 描線を stroke:#fff に変えて明度 1 の色にする
* マスク方法を mask-mode:alpha に変える