使用 QML 绘制 SVG

Posted 2023-02-14

【中文标题】使用 QML 绘制 SVG

【英文标题】：Draw SVG using QML

【发布时间】：2018-03-17 17:27:24

【问题描述】：

如何用qml简单的文字画出SVG？

根据 QtDocs，可以使用以下代码绘制 SVG：

Path 
    startX: 50; startY: 50
    PathSvg  path: "L 150 50 L 100 150 z" 

但实际上并没有。 那么，如何绘制 SVG？

【问题讨论】：

仔细阅读文档有助于解决很多问题。例如Path 的文档说： 注意：路径是非可视类型；它不会自行显示任何内容。要绘制路径，请使用 Shape

@folibis 但这只是路径，不是 SVG 路径，而且您知道 SVG 代表什么 - 可缩放矢量 图形，而不是数据；)

当然，但据我了解，TC 想要Path，所以我只是为他指出了正确的方式:) 至于我，我会改用Image。

【参考方案1】：

如果要显示路径，必须在Shape 中使用它：

Shape 
    ShapePath 
        fillColor: "red"
        strokeWidth: 2
        strokeColor: "blue"
        startX: 50; startY: 50
        PathSvg  path: "L 150 50 L 100 150 z" 
    

【参考方案2】：

文档中没有任何关于绘图的内容。它使用 SVG 路径语法表示“定义路径”。

绘制它是一个不同的步骤：

Canvas 
    width: 400; height: 200
    contextType: "2d"

    onPaint: 
        context.strokeStyle = Qt.rgba(.4,.6,.8)
        context.path = yourPath
        context.stroke()
    

请注意，只要 Qt 编译时支持 SVG，您就可以直接使用 .svg 文件作为图像源。