在 HTML 上绘图的最佳方式是啥

Posted 2023-05-08

【中文标题】在 HTML 上绘图的最佳方式是啥

【英文标题】：what is the best way to draw on HTML在 HTML 上绘图的最佳方式是什么

【发布时间】：2021-05-20 14:22:18

【问题描述】：

我正在尝试使用 html、CSS 和 jQuery 进行此设计。

我尝试从设计中导出线条并将其作为 img 如下所示：

   <div class="container-fluid">
        <div class="row">
            
            <div class="col-lg-6 d-flex flex-column justify-content-center align-items-center">
                <div class="yellow-circle d-flex justify-content-center align-items-center ">
                    <h1>1</h1>
                </div>
                <div class="w-75 text-center"> 
                <h1 class="text-center">Tell Us How Much Debt You Are Facing</h1>
                <p>Call us or fill out our online form to receive a free, no obligation consultation.</p>
            </div>
            </div>
            <div class="col-lg-6">
                <img class="step-1" src="./Assest/step1.png" >
            </div>
        </div>
        <img class="line-1" src="./Assest/Vector 6.svg" >
        </div>

和css：

.line-1
    position: absolute;
    left: 560px;
    top:1500px

但它看起来不像设计，有什么好的方法可以让它完全像设计吗？

【问题讨论】：

可能是帆布，我不完全确定。但是您可以从这里w3school Canvas 学习它。但是您也可以使用 SVG 并在 Illustrator 上绘制它，而无需进行任何编码。

您是否查看了示例的源代码以了解他们做了什么？

【参考方案1】：

我不清楚您要复制多少原件，但对于线路本身，SVG 可能是一个不错的选择。

我在 Sketch 中使用矢量工具跟踪线条，然后将其导出为 SVG，然后用文本编辑器打开该文件并将其添加到 HTML 中

https://codepen.io/panchroma/pen/XWNgJKv

您可以在 Illustrator 或其他图形设计工具中做同样的事情。

<svg  viewBox="0 0 521 517"  xmlns="http://www.w3.org/2000/svg"><path d="m519.71875.9296875c-24.996094 14.375-96.300781 64.5976563-161.679687 79.421875-16.68553 3.7833294-50.711459 5.7927067-90.258164 4.2798491-65.61229-2.5099956-148.120463-9.5422982-204.3392194 3.7818232-42.6675685 10.1124233-66.23833205 41.9247342-60.6682421 70.4383282 17.3327833 88.72746 94.5507813 59.976562 123.9804685 65.992187 29.429688 6.015625 97.349086-9.289457 138.398246 56.874251 12.778161 20.596049 9.756603 48.326497-3.666131 82.628183-6.806966 17.395144-16.288831 36.480232-27.74153 57.181818-9.541433 17.246832-21.090378 49.070832-34.646835 95.471998" fill="none" stroke="#2a3287" stroke-dasharray="5" stroke-/></svg>