htmlページの描画図

Question

私はHTMLページを描きたい。ダイアグラムには、ドット、線、ポリゴン、円、日食などが含まれている可能性があります。これを行う最良の方法はどれですか。私はソリューションがウェブサイトに非常に高速にロードされるようにしたい。あなたが例の解決策で助けてくれますか

Answer 1

SVG (Scalable Vector Graphic)を使用してください。それはまさにあなたが探しているものなのです。あなたはすでに描かれているものを表示したい場合は

<svg width="500" height="200"> 
 
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
 
    <rect x="100" y="10" width="50" height="50" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" /> 
 
    <ellipse cx="250" cy="60" rx="100" ry="50" style="fill: yellow; stroke:purple; stroke-width: 2" /> 
 
    <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" /> 
 
    <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" /> 
 
    <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" /> 
 
    <text x="200" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text> 
 
</svg>

Answer 2

プレーンSVGは良い解決策です。

一方、ユーザーが独自の図面を作成したい場合、図を描画するように設計されたライブラリを使用する方がはるかに簡単です。このようなライブラリはSVGまたはCanvasを内部的に使用できますが、SVGまたはCanvasを学習する必要がないため、あまり重要ではありません。

このようなライブラリの例は、私が作成したもの、GoJSです。例：http://gojs.net/latest/samples/index.htmlを参照してください。