QML-如何将SVG DOM加载到映像中

Question

我有一个使用SVG文件的简单QML项目。

在这里，我可以从qrc资源正确加载image.svg。

Image {
        id: svg
        source: "svg/image.svg"
        x: 0
        y: header.height
        fillMode: Image.PreserveAspectFit
    }

我想知道是否可以将DOM SVG作为String分配给Image.source？

像这样的字符串：

<svg version="1.1" id="svg2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1147.592px" height="1397.27px" viewBox="0 0 1147.592 1397.27" enable-background="new 0 0 1147.592 1397.27" xml:space="preserve"><polygon fill="none" stroke="#010101" stroke-miterlimit="10" points="839.432,179.454 839.432,190.151 
852.657,189.897 852.657,180.621 "/></svg>

Answer 1

您可以像使用HTML一样完全使用数据URI嵌入图像数据：

import QtQuick 2.11
import QtQuick.Window 2.2

Window {
    visible: true
    width: 200
    height: 200
    title: qsTr("Inline SVG example")

    Image {
        anchors.centerIn: parent
        source: "data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 96 105\"> <g fill=\"#97C024\" stroke=\"#97C024\" stroke-linejoin=\"round\" stroke-linecap=\"round\"> <path d=\"M14,40v24M81,40v24M38,68v24M57,68v24M28,42v31h39v-31z\" stroke-width=\"12\"/> <path d=\"M32,5l5,10M64,5l-6,10 \" stroke-width=\"2\"/> </g> <path d=\"M22,35h51v10h-51zM22,33c0-31,51-31,51,0\" fill=\"#97C024\"/> <g fill=\"#FFF\"> <circle cx=\"36\" cy=\"22\" r=\"2\"/> <circle cx=\"59\" cy=\"22\" r=\"2\"/> </g> </svg>"
    }
}

为了方便起见，可以使用Base64对图像源进行编码。 但是我认为这不是绘制SVG的有效方法。 您应该使用Qt SVG加载SVG文件或直接绘制SVG图像。