SVG路径字符串格式

命令 名称 参数
M 移动到(moveTo) (x y)+
Z 闭合路径(closepath) (none)
L 直线(lineTo) (x y)+
H 水平直线 x+
V 垂直直线 y+
C 曲线(curveto) (x1 y1 x2 y2 x y)+
S 平滑曲线 (x2 y2 x y)+
Q 二次贝赛尔曲线 (x1 y1 x y)+
T 平滑二次贝塞尔曲线 (x y)+
A 椭圆弧 (rx ry x-axis-rotation large-arc-flag sweep-flag x y)+
R Catmull-Rom 曲线* x1 y1 (x y)+

* “Catmull-Rom 曲线”不是标准SVG命令,在2.0版时被加入。
注:有种特殊情况,路径只包含三个命令:“M10,10R…z”。在这种情况下,路径将平滑连接到它的起点。

更多:http://www.w3.org/TR/SVG/paths.html#PathData

发布了430 篇原创文章 · 获赞 415 · 访问量 925万+
展开阅读全文

如何将SVG String转换为PNG?

10-15

<div class="post-text" itemprop="text"> <p>I know that there are various topics about this but i haven't found the right answer...</p> <p>I need to transform a SVG string to a png image, it has to be a png image because i need the transparency and for what i'm trying to use it only accepts png (or gift) images...</p> <p>I need to do this through <strong>php</strong> or <strong>javascript</strong>...</p> <p>I've been reading about Raphael but it only returns the image in a way, and i need the image file !!!!</p> <p>Also i've been trying with image magick (php ext) and it give me this error:</p> <blockquote> <p><strong>no decode delegate for this image format</strong></p> </blockquote> <p>I hope anybody can help !!! </p> <p>Thanks!</p> <p>This is my SVG File...</p> <pre><code><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="560" height="300"> <defs> <clipPath id="highcharts-6"> <rect rx="0" ry="0" fill="none" x="0" y="0" width="9999" height="300" stroke-width="0.000001"> </rect> </clipPath> <clipPath id="highcharts-7"> <rect fill="none" x="0" y="0" width="560" height="300"> </rect> </clipPath> </defs> <g class="highcharts-series-group" > </g> <g class="highcharts-shadow" > <path fill="none" d="M 279.96944901944573 0.0000031112080876027903 A 150 150 0 0 1 326.3009125168081 292.6752448748937 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"> </path> <path fill="none" d="M 279.96944901944573 0.0000031112080876027903 A 150 150 0 0 1 326.3009125168081 292.6752448748937 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="3" stroke-linejoin="round" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"> </path> <path fill="none" d="M 279.96944901944573 0.0000031112080876027903 A 150 150 0 0 1 326.3009125168081 292.6752448748937 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="1" stroke-linejoin="round" stroke-opacity="0.15" transform="translate(1, 1)"> </path> </g> <g class="highcharts-shadow" > <path fill="none" d="M 326.3007698415401 292.67529117573486 A 150 150 0 0 1 133.00773034195186 179.88766736926223 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"> </path> <path fill="none" d="M 326.3007698415401 292.67529117573486 A 150 150 0 0 1 133.00773034195186 179.88766736926223 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="3" stroke-linejoin="round" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"> </path> <path fill="none" d="M 326.3007698415401 292.67529117573486 A 150 150 0 0 1 133.00773034195186 179.88766736926223 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="1" stroke-linejoin="round" stroke-opacity="0.15" transform="translate(1, 1)"> </path> </g> <g class="highcharts-shadow" > <path fill="none" d="M 133.007700454358 179.88752037697762 A 150 150 0 0 1 156.4888806240783 64.88241432872512 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"> </path> <path fill="none" d="M 133.007700454358 179.88752037697762 A 150 150 0 0 1 156.4888806240783 64.88241432872512 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="3" stroke-linejoin="round" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"> </path> <path fill="none" d="M 133.007700454358 179.88752037697762 A 150 150 0 0 1 156.4888806240783 64.88241432872512 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="1" stroke-linejoin="round" stroke-opacity="0.15" transform="translate(1, 1)"> </path> </g> <g class="highcharts-shadow" > <path fill="none" d="M 156.48896574172574 64.8822908176483 A 150 150 0 0 1 217.00753341120077 13.867898153818942 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"> </path> <path fill="none" d="M 156.48896574172574 64.8822908176483 A 150 150 0 0 1 217.00753341120077 13.867898153818942 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="3" stroke-linejoin="round" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"> </path> <path fill="none" d="M 156.48896574172574 64.8822908176483 A 150 150 0 0 1 217.00753341120077 13.867898153818942 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="1" stroke-linejoin="round" stroke-opacity="0.15" transform="translate(1, 1)"> </path> </g> <g class="highcharts-shadow" > <path fill="none" d="M 217.00766954333415 13.867835161420402 A 150 150 0 0 1 273.3436894553766 0.14776101127640118 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"> </path> <path fill="none" d="M 217.00766954333415 13.867835161420402 A 150 150 0 0 1 273.3436894553766 0.14776101127640118 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="3" stroke-linejoin="round" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"> </path> <path fill="none" d="M 217.00766954333415 13.867835161420402 A 150 150 0 0 1 273.3436894553766 0.14776101127640118 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="1" stroke-linejoin="round" stroke-opacity="0.15" transform="translate(1, 1)"> </path> </g> <g class="highcharts-shadow" > <path fill="none" d="M 273.3438393076189 0.1477543550407745 A 150 150 0 0 1 279.9415029437792 0.00001140635239949006 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="5" stroke-linejoin="round" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"> </path> <path fill="none" d="M 273.3438393076189 0.1477543550407745 A 150 150 0 0 1 279.9415029437792 0.00001140635239949006 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="3" stroke-linejoin="round" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"> </path> <path fill="none" d="M 273.3438393076189 0.1477543550407745 A 150 150 0 0 1 279.9415029437792 0.00001140635239949006 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="black" stroke-width="1" stroke-linejoin="round" stroke-opacity="0.15" transform="translate(1, 1)"> </path> </g> <g class="highcharts-point" > <path fill="#4572A7" d="M 279.96944901944573 0.0000031112080876027903 A 150 150 0 0 1 326.3009125168081 292.6752448748937 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round"> </path> <path fill="rgb(192,192,192)" d="M 279.96944901944573 0.0000031112080876027903 A 150 150 0 0 1 326.3009125168081 292.6752448748937 L 280 150 A 0 0 0 0 0 280 150 Z" fill-opacity="0.000001" visibility="visible" style=""> </path> </g> <g class="highcharts-point" > <path fill="#AA4643" d="M 326.3007698415401 292.67529117573486 A 150 150 0 0 1 133.00773034195186 179.88766736926223 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round"> </path> <path fill="rgb(192,192,192)" d="M 326.3007698415401 292.67529117573486 A 150 150 0 0 1 133.00773034195186 179.88766736926223 L 280 150 A 0 0 0 0 0 280 150 Z" fill-opacity="0.000001" visibility="visible" style=""> </path> </g> <g class="highcharts-point" > <path fill="#89A54E" d="M 133.007700454358 179.88752037697762 A 150 150 0 0 1 156.4888806240783 64.88241432872512 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round"> </path> <path fill="rgb(192,192,192)" d="M 133.007700454358 179.88752037697762 A 150 150 0 0 1 156.4888806240783 64.88241432872512 L 280 150 A 0 0 0 0 0 280 150 Z" fill-opacity="0.000001" visibility="visible" style=""> </path> </g> <g class="highcharts-point" > <path fill="#80699B" d="M 156.48896574172574 64.8822908176483 A 150 150 0 0 1 217.00753341120077 13.867898153818942 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round"> </path> <path fill="rgb(192,192,192)" d="M 156.48896574172574 64.8822908176483 A 150 150 0 0 1 217.00753341120077 13.867898153818942 L 280 150 A 0 0 0 0 0 280 150 Z" fill-opacity="0.000001" visibility="visible" style=""> </path> </g> <g class="highcharts-point" > <path fill="#3D96AE" d="M 217.00766954333415 13.867835161420402 A 150 150 0 0 1 273.3436894553766 0.14776101127640118 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round"> </path> <path fill="rgb(192,192,192)" d="M 217.00766954333415 13.867835161420402 A 150 150 0 0 1 273.3436894553766 0.14776101127640118 L 280 150 A 0 0 0 0 0 280 150 Z" fill-opacity="0.000001" visibility="visible" style=""> </path> </g> <g class="highcharts-point" > <path fill="#DB843D" d="M 273.3438393076189 0.1477543550407745 A 150 150 0 0 1 279.9415029437792 0.00001140635239949006 L 280 150 A 0 0 0 0 0 280 150 Z" stroke="#FFFFFF" stroke-width="1" stroke-linejoin="round"> </path> <path fill="rgb(192,192,192)" d="M 273.3438393076189 0.1477543550407745 A 150 150 0 0 1 279.9415029437792 0.00001140635239949006 L 280 150 A 0 0 0 0 0 280 150 Z" fill-opacity="0.000001" visibility="visible" style=""> </path> </g> <g class="highcharts-legend" > <rect rx="5" ry="5" fill="none" x="0.5" y="0.5" width="7" height="7" stroke-width="1" stroke="#909090" visibility="hidden"> </rect> <g clip-path="url(#highcharts-6)"> <g> </g> </g> </g> <g class="highcharts-tooltip" style="padding:0;white-space:nowrap;" visibility="hidden"> <rect rx="5" ry="5" fill="none" x="0" y="0" width="10" height="10" stroke-width="5" fill-opacity="0.85" stroke="black" stroke-opacity="0.049999999999999996" transform="translate(1, 1)"> </rect> <rect rx="5" ry="5" fill="none" x="0" y="0" width="10" height="10" stroke-width="3" fill-opacity="0.85" stroke="black" stroke-opacity="0.09999999999999999" transform="translate(1, 1)"> </rect> <rect rx="5" ry="5" fill="none" x="0" y="0" width="10" height="10" stroke-width="1" fill-opacity="0.85" stroke="black" stroke-opacity="0.15" transform="translate(1, 1)"> </rect> <rect rx="5" ry="5" fill="rgb(255,255,255)" x="0" y="0" width="10" height="10" stroke-width="2" fill-opacity="0.85"> </rect> <text x="5" y="18" style="font-family:'lucida grande', 'lucida sans unicode', verdana, arial, helvetica, sans-serif;font-size:12px;color:#333333;fill:#333333;" > </text> </g> <g class="highcharts-tracker" > </g> </svg> </code></pre> </div> 问答

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览