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ランキング
-
<div>のタッチ状態を維持したま...
-
プラグイン無しでContactform7...
-
bxslider、画像が3枚以上になる...
-
複数のjavascriptを使うと動か...
-
jqueryを2つ設置した事で片方...
-
<a href="#" …>の意味を教えて...
-
別ファイルのfunctionの読み込み方
-
getElementsByNameで要素が取得...
-
SQLのWHEREで全てを質問する方法
-
ウインドウを縮小しても文字を...
-
プルダウンメニューを別ファイ...
-
Dreamweaver で 外部JSを読み込...
-
「関数が定義されていない」と...
-
window.openで同画面遷移しない
-
確認ダイアログで「キャンセル...
-
onLoadをbodyタグ以外で使用する
-
Vbscriptで自分自身のウィンド...
-
javascriptのalertで文字化けが...
-
ポップアップウィンドウの位置
-
bodyにidをつける理由は何ですか?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
base64encodeでの文字化けについて
-
複数のjavascriptを使うと動か...
-
Base64に変換したHTMLの<script...
-
シャドウボックスとjQueryを共...
-
lightboxの動作に関して
-
音楽再生用jQueryプラグイン「j...
-
CrossSlideのスライドショーが...
-
htmlで別ファイルのjavascript...
-
jQueryの基本的なことについて...
-
プラグイン無しでContactform7...
-
ebayの返信で『 Message may no...
-
DreamWeaverでJS
-
document.lastChild.appendChil...
-
パソコンでホームページを作成...
-
dojo(ライブラリ)のカレンダ...
-
jqeryのslicksliderのパスにつ...
-
jQueryのloadメソッドをする際...
-
フォントサイズを変更するボタ...
-
同一HTML内に複数のjQueryを作...
-
マウスオーバー+クリカブルマッ...
おすすめ情報