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 图像。