html SVGの视框のメモ
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html SVGの视框のメモ相关的知识，希望对你有一定的参考价值。
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
svg {
display: block;
}
</style>
</head>
<body>
<!--
座標1つのサイズは1pxとなる 1px = 1利用単位
-->
<svg viewBox="0 0 10 10" width="10px" height="10px">
<circle fill="#fc0" stroke="#000" cx="5" cy="5" r="5"></circle>
</svg>
<!--
利用単位は5pxとなる
50pxの横幅に利用単位が10マスある。
50 / 10 = 5
-->
<svg viewBox="0 0 10 10" width="50px" height="50px">
<circle fill="#fc0" stroke="#000" cx="5" cy="5" r="5"></circle>
</svg>
<!--
viewBoxの指定あり、width, heightに絶対値を指定
利用単位1.5px
-->
<svg viewBox="0 0 200 200" width="300px" height="300px">
<circle fill="#fc0" stroke="#000" cx="5" cy="5" r="5"></circle>
</svg>
<!--
viewBoxの指定あり、width, heightに%を指定
- 利用単位はブラウザ幅によって変わる
- width,heightを指定しない場合は両方ともこれと同じ設定になる
-->
<svg viewBox="0 0 200 200" width="100%" height="100%">
<circle fill="#fc0" stroke="#000" cx="5" cy="5" r="5"></circle>
</svg>
</body>
</html>
以上是关于html SVGの视框のメモ的主要内容，如果未能解决你的问题，请参考以下文章
html キャンバスのメモ
markdown 论文を読んだときのメモ
swift RootViewController的差し替え时のメモリリーク対策
scss スプライト生成，座标取得，视网膜対応のSass.Compass关数のメモ
html 元タグの视の设定
裁剪 SVG 的正确方法？