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>
No.1ベストアンサー
- 回答日時:
マスク方法ですが、
透過性(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 に変える
>描線を stroke:#fff に変えて明度 1 の色にする
で、思っていた通りできました!!!
前回の質問でもお答えいただきありがとうございました!
Inkscapeソフトの使い方で時間がかかってしまい、前回も返信が遅れて失礼いたしました。
ありがとうございます!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS 疑似要素で背景画像に指定したSVG画像の色変更 2 2023/01/30 22:45
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS flex の各子要素を横幅 100% にしたい 1 2022/09/22 21:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
複数のjavascriptを使うと動か...
-
ワードプレスでjQuery 右から飛...
-
Base64に変換したHTMLの<script...
-
<a href="#" …>の意味を教えて...
-
cssにjavascriptを入れる?呼び...
-
別ファイルのfunctionの読み込み方
-
テキストをクリックすると答え...
-
iframeの中から親ページをスム...
-
bodyにidをつける理由は何ですか?
-
リンクに飛ばない・・・
-
javascriptファイルは1つに統...
-
<iframe>~</iframe>内のwindow...
-
javascriptでbgmを自動再生する...
-
onbeforeunload時のwindow.open...
-
外部からのjs呼び出しについて。
-
function の return 値を表示し...
-
「jQuery」アニメーションをル...
-
Dreamweaver で 外部JSを読み込...
-
親フレームのURLによって、...
-
文字をクリックすると 小窓が開く
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
base64encodeでの文字化けについて
-
jquery ui.resizable 使い方
-
複数のjavascriptを使うと動か...
-
Base64に変換したHTMLの<script...
-
bxslider、画像が3枚以上になる...
-
Jqueryの干渉について
-
DreamWeaverでJS
-
複数のバージョンのjQueryを同...
-
マウスオーバー+クリカブルマッ...
-
マスターページでのJavaScriopt...
-
jqueryのcolorboxを読込直後に...
-
javascript外部読み込みの際の引数
-
lightbox2 表示の不具合
-
jsファイルで配列を定義し、j...
-
jqueryを2つ設置した事で片方...
-
<script>タグというのはどこか...
-
Javascriptがうまく動作しません。
-
同一HTML内に複数のjQueryを作...
-
jqueryについて(Lightboxとbxs...
-
colorboxの直接呼び出し方法に...
おすすめ情報