ツールヒント (svg を使用して動的なダイアログ ボックスを作成する)_html/css_WEB-ITnose

昨夜svgを使って動的ツールチップを作る方法を見たので、今日思いつきでやってみたら、無事に作ることができました。原理も理解できて、とても勉強になりました！次に、svg についてもっと学ぶ必要があります。これは良いことです。

これは、次のような、通常複雑になるいくつかの詳細を実行する方法にも注意を払っています。

記事のタグの長さはそれぞれ 600 ピクセル、セクションは 300 ピクセルで、display:inline-block; に設定し、次の効果を与えます:

本来はアバターを横に並べるのが一般的ですが、display:inline-block; を行うと、article タグとsection タグの間が空白になってしまうため、画像が同じ行に配置されなくなります。解決策は、次の CSS コードを記事タグとセクション タグに追加することです:

article{
width:600px;
margin:200px;
font-size:0;
}
article Section{
display:inline-block ;
width:300px;
font-size:14px;
position:relative;
}

つまり、空白は削除されます。

さらに、SVG Web 画像の場合、画像スタイルを変更できるように、その形式はおおよそ次のとおりです (例):

width="600px" height= "300px" viewBox="0 0 600 300" enable-background="new 0 0 600 300" xml:space="preserve">
48.936,215.306 9.75,75.342 "/>

そのような svg が多数ある場合、それを HTML ファイル内に導入することはできません画像、修正するのが面倒起きる！

この画像をロードするには ajax が使用されます:

html dom:

// 質問2: svg 画像をインポートするにはどうすればよいですか? svg 全体をインポートすることは不可能なので、変更や編集には不便です

// ヒント 2: js を使用してロードします
$('svg[data-src]').each( function(index, svg) {
var src = $(svg).data('src'); //data は data-* 属性のパスを取得するために使用されます
$.ajax({
url: src,
dataType : ' xml',
成功: function(content) {
var doc = content.documentElement;
$(doc).attr({
幅: $(svg).attr('width'),
高さ: $( svg) .attr('height')
});
$(svg).after(doc).remove();
}
})
});

写真用のストロークアニメーション効果もありますので、 SVG 画像のみの良い方法:

ストローク-dasharray を使用します (破線のストローク、ストローク全体の効果を完成させるために適切なサイズに調整し続けることができます) ストローク-ダッシャオフセット (破線の間隔、調整します)ストローク全体に) SVG にはストローク効果がありません)、トランジションを使用してこのアニメーションを実現します

最終効果 (図に示すように、オンライン デモはありません。アニメーション効果は生成できませんが、コードを直接コピーします)以下に投稿し、2 つの SVG 画像とアバターをダウンロードします) 使用できます)

コードは次のとおりです:

toolTip聊天对话框制作

韩国正太

听说优衣库的试衣间已全面升级，空间大小扩充一倍，精装修，同时四面都安有镜子，方便无死角录像呢，要去试一下不，美女！

ユニクロ ビューティ

面白そうですね、行きましょう、ハンサム、準備をして、行きましょう!