SVGを使うとき、hrefの追加方法が知りたいです。
検索したところ、Xlinkを使用するように記載してありましたが、機能しませんでした。
html
1<div class="btn"> 2 Read more 3 <svg width="130" height="65" viewBox="0 0 130 65" xmlns="http://www.w3.org/2000/svg"> 4 <rect x='0' y='0' fill='none' width='130' height='65'/> 5 </svg> 6</div>
css
1.btn { 2 width: 130px; 3 height: 65px; 4 margin: 15px auto; 5 color: black; 6 font-family: 'Open Sans', sans-serif; 7 font-size: 1.15rem; 8 line-height: 65px; 9 text-align: center; 10 position: relative; 11 cursor: pointer; 12} 13 14svg { 15 position: absolute; 16 top: 0; 17 left: 0; 18} 19svg rect, svg path, svg polyline { 20 fill: none; 21 stroke: black; 22 stroke-width: 1; 23} 24 25.btn:hover svg rect { 26 stroke: black; 27} 28 29svg rect { 30 stroke-dasharray: 400, 0; 31 -webkit-transition: all 0.8s ease-in-out; 32 -moz-transition: all 0.8s ease-in-out; 33 -ms-transition: all 0.8s ease-in-out; 34 -o-transition: all 0.8s ease-in-out; 35} 36 37.btn:hover svg rect { 38 stroke-width: 3; 39 stroke-dasharray: 35, 245; 40 stroke-dashoffset: 38; 41 -webkit-transition: all 0.8s ease-in-out; 42 -moz-transition: all 0.8s ease-in-out; 43 -ms-transition: all 0.8s ease-in-out; 44 -o-transition: all 0.8s ease-in-out; 45}
目的とゴールを明示された方が回答者が無用なエスパーすることなくアドバイスできるので、解決もしやすくなると思います。
要件不明瞭なのはよろしくありません
回答1件
あなたの回答
tips
プレビュー