SVG 图像生成答案

【问题标题】：SVG Image GenerateSVG 图像生成
【发布时间】：2019-12-03 09:39:31
【问题描述】：

已尝试以下代码生成 SVG 图像

<path fill="transparent" stroke="#000" stroke-width="1.5"
            d="M15 3
               Q16.5 6.8 25 18
               A12.8 12.8 0 1 1 5 18
               Q13.5 6.8 15 3z" />

    var pat = "M"+15+" "+3+" "+ "Q"+ 16.5 +" "+6.8+ " " + 25 + " " +18+ " "+"A" + 12.8 + " " + 12.8+ " " + 0 + " " + 1  + " " + 1 + " " + 5  + " " +18+ " " +"Q" + 13.5 + " " + 6.8 + " " + 15 + " " + 3 + "Z";

      e.append("path").attr("d", pat);

并得到下面的图像

但我需要这张图片

我应该怎么做才能使它与第二张图像相同。

【问题讨论】：

使用变换在 y 轴上缩放它。
你能详细说明你的答案吗
看不懂的评论是怎么回事？
d="M15 3 Q16.5 6.8 25 18 A12.8 12.8 0 1 1 5 18 Q13.5 6.8 15 3z" 需要修改的部分请说明
没有。为路径添加一个变换属性。

标签： php html svg

【解决方案1】：

在尝试了这么多坐标值后，我找到了创建 drop svg 的确切坐标

代码如下：

<svg height="1010" width="500">
<path fill="transparent" stroke="#000" stroke-width="1.5"
        d="M297.5 3        
           Q297.5 6.8 410.5 150           
           A120.8 102.8 0 1 1 210 148           
           Q297.5 6.8 297.5 3z"       
           />
</svg>

编码愉快！！！

【讨论】：