Q&A
「実装した」のでしたらご自身のコードをご自身のものとして質問本文にご提示ください。
###困っていること
https://codepen.io/chrisgannon/pen/xVOjZq
に載っているソースコードをお借りしてページネーションを静的に実装したのですが、デザインを崩さずにリンクをつくる方法がわかりません。
<circle>の外側に<a href='#'></a>をつけると真ん中の黒い球が消えてしまいます。なぜでしょうか？
回答1件
0
ページネーションのデザインを崩さずにリンクをつける方法がわからない
ご質問のリンク 先で起用されるライブラリの開発元（GreenSock 社）のライセンスにも関わる内容ですので、回答できる範囲は限られます。
以下の手順でソースを追えば原因が分かるのではないでしょうか。
2.1. TimelineMax ドキュメント
2.2. TweenMax ドキュメント
3. ご質問のリンクのソースから、SVG（マークアップ）とJSによるそのDOM操作を調べて、挙動の因果関係を掴む。
少なくとも SVGのA要素には href 属性はなく、namespace を持った xlink:href になるはずです。
※GreenSockのライセンスについて
- 自力でドキュメントやコードを追い、公開環境だけで利用する場合は無料
- 1.以外の場合は、Club GreenSockへの参加が義務付けられ有償
投稿2019/12/29 23:42
総合スコア5432
自力でコードを解読しなければ使ってはいけないというライセンスなのですね。
数日間悩んでいました。
circleGroupの円を.cloneNode(true)でクローンしてそれをマスクとしているところまではわかりました。
問題は<g>タグでまとめて.setAttributeするのに<circle>を<a>で囲むとそれが阻害されてマスクが無効化してしまうことのようです。解決方法が今のところまだわかっていませんのでひとまずマスクなしで実装しておこうと思います。
公開環境だけで利用するかどうか も条件に含まれます。自力でなんとかできる人でも「ログインを要するサイトで使う」場合は有償のようですよ。蛇足ですが、商売の方法はいろいろとあるものだと感じます。
あなたの回答
tips
プレビュー
