ホームページ >ウェブフロントエンド >htmlチュートリアル >SVG_html/css_WEB-ITnose で描画された html 5 WeChat ロゴの新機能
SVG_html/css_WEB-ITnose で描画された html 5 WeChat ロゴの新機能
- WBOYオリジナル
- 2016-06-24 11:27:281246ブラウズ
SVG 画像を描画する簡単な小さなケース。
レンダリング:
コードは次のとおりです:
1 <style> 2 * { 3 padding: 0; 4 margin: 0; 5 } 6 7 body { 8 background-color: #d5d3d4; 9 }10 11 .container {12 width: 500px;13 height: 500px;14 position: relative;15 top: 80px;16 left: 50%;17 transform: translate3d(-50%,0,0);18 background-color:#08c406;19 border-radius: 10px;20 box-shadow: 0 0 5px #c2bfbf;21 }22 .container object{23 position:relative;24 top:50px;25 left:50px;26 }27 </style> <body> <div class="container"> <object data="logo.svg" width="400" height="400" type="image/svg+xml" /> </div></body>
これは、HTML ドキュメントから分離された XML 形式のコードです。
りー声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。