SVG图片操作

QT

Posted by YiMiTuMi on July 3, 2024

SVG图片操作

SVG图片本质的格式是一个xml文件,里面记录了图片的大小、颜色等信息。QT中可以将SVG文件读到内存中,然后用 Painter 绘制到 Pixmap 上就可以当图片显示了,同时修改这个xml可以修改图片的颜色大小等各项数据。

QT中使用SVG跟XML需要添加:

QT += svg
QT += xml

读取SVG到Pixmap上

//绘制的图片大小
#define SVG_SIZE 60

QPixmap* ReadSvgToPixmap(const QString &strSvgPath)
{
    QByteArray bySvgInfo; //用来保存svg的字节数组

    //读取SVG
    QFile fileSvg(strSvgPath);
    fileSvg.open(QIODevice::ReadOnly);
    bySvgInfo = fileSvg.readAll();
    fileSvg.close();

    //将svg显示到Pixmap上
    QSvgRenderer svg(bySvgInfo); //初始化一个svg

    //初始化一个背景透明的Pixmap
    QPixmap* pPixmap = new QPixmap(SVG_SIZE, SVG_SIZE);
    pPixmap->fill(Qt::transparent); //设置背景透明

    QPainter painter(pPixmap);

    //设置旋转角度
    {
        //设置旋转中点
        painter.translate(SVG_SIZE / 2, SVG_SIZE / 2);

        //旋转角度
        painter.rotate(0);

        //恢复中点
        painter.translate(- SVG_SIZE / 2, - SVG_SIZE / 2);
    }

    //将svg绘制到图片上
    svg.render(&painter);

    return pPixmap;
}

函数接受一个SVG文件的路径,按字节形式保存。

修改SVG图片颜色

修改颜色也就是对xml文件进行操作。

void SetAttrRecur(QDomElement &elem, const QString &strTagName, const QString &strAttr, const QString &strAttval)
{
    if (elem.tagName().compare(strTagName) == 0)
    {
        elem.setAttribute(strAttr, strAttval);
    }

    for (int i = 0; i < elem.childNodes().count(); i++)
    {
        if (!elem.childNodes().at(i).isElement())
        {
            continue;
        }

        SetAttrRecur(elem.childNodes().at(i).toElement(), strTagName, strAttr, strAttval);
    }
}

函数用于修改执行xml项的值。

//修改颜色 #000000
void ModSvgColor(QByteArray &bySvgInfo, const QString &strColor)
{
    QDomDocument doc;
    doc.setContent(bySvgInfo);

    //修改颜色
    QString strTagName = "path";
    QString strAttr = "fill";
    QString strAttrVal = strColor; //要修改的颜色

    SetAttrRecur(doc.documentElement(), strTagName, strAttr, strAttrVal);

    bySvgInfo = doc.toByteArray();
}

函数修改指定svg文件的颜色,颜色用16进制表示。

注:不一定所有的SVG颜色保存格式都是一样的具体要打开SVG看一下,可以用记事本打开!