Question

我正在尝试显示和修改某些svg，我希望能够阅读或修改它们的颜色。

GraphicsColorSvgItem::GraphicsColorSvgItem(QString svgContent, QGraphicsItem *parent) :
    QGraphicsSvgItem(parent),
    _svgXML()
{
    _svgXML.setContent(svgContent);
    setSharedRenderer(new QSvgRenderer(_svgXML.toByteArray()));
}

void GraphicsColorSvgItem::setColor(QColor c)
{
    changeAttributes("fill", c.name().toUpper());
    changeAttributes("stroke", c.name().toUpper());
    changeAttributes("style", c.name().toUpper());   // this obviously needs to be treated separately just don't know how
    renderer()->load(_svgXML.toByteArray());
}

void GraphicsColorSvgItem::changeAttributes(QString attName, QString attValue)
{
    QDomElement rootElem = _svgXML.documentElement();
    QDomNode n = rootElem.firstChild();
    while(!n.isNull())
    {
        if(n.isElement())
        {
            QDomElement e = n.toElement();
            QSTRING_DEBUG(e.tagName());
            if(e.hasAttribute(attName))
            {
                e.setAttribute(attName, attValue);
            }
            if(n.hasChildNodes())
                recursiveChangeAttributes(n.firstChild(), attName, attValue);
        }
        n = n.nextSibling();
    }
}

void GraphicsColorSvgItem::recursiveChangeAttributes(QDomNode node, QString attName, QString attValue)
{
    QDomNode n = node;
    while(!n.isNull())
    {
        if(n.isElement())
        {
            QDomElement e = n.toElement();
            if(e.hasAttribute(attName))
            {
                e.setAttribute(attName, attValue);
            }
            if(n.hasChildNodes())
                recursiveChangeAttributes(n.firstChild(), attName, attValue);
        }
        n = n.nextSibling();
    }
}

以下svg已成功更改为我传递的颜色

<!DOCTYPE html>

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  Sorry, your browser does not support inline SVG.  
</svg>

以下svg虽然有“样式”属性 - 我不知道如何解析它

<!DOCTYPE html>

<svg height="250" width="500">
  <circle cx="50" cy="50" r="40" style="fill:red;stroke:black;stroke-width:3" />
  Sorry, your browser does not support inline SVG.
</svg>

结果显示为黑色 - 因为整个“样式”设置为不受支持的内容。

编辑：现在我正在进行字符串替换，它似乎有效...但我希望有一个xml方法......

if(attName=="style")
{
    QString value = e.attribute(attName);
    int fill1 = value.indexOf(QString("fill:")) + 5;
    int fill2 = value.indexOf(QString(";"), fill1);
    if(fill2<=fill1)
       fill2 = value.indexOf(QString("\""), fill1);
    QString subString = value.mid(fill1, fill2 - fill1);
    value.replace(subString, attValue);    
    fill1 = value.indexOf(QString("stroke:")) + 7;
    fill2 = value.indexOf(QString(";"), fill1);
    if(fill2<=fill1)
       fill2 = value.indexOf(QString("\""), fill1);
    subString = value.mid(fill1, fill2 - fill1);
    value.replace(subString, attValue);
    e.setAttribute(attName, value);
}
else
{
    e.setAttribute(attName, attValue);
}

Answer 1

在style属性中找到的内容通常是CSS样式语法。所以使用支持CSS的解析器可能是你最好的选择。正则表达式可能有用，但可能不是最容易使用...

话虽如此，我会改用：

if(attName=="style")
{
    QString value = e.attribute(attName);

    QStringList styleList = value.split(";");
    QStringList newStyleList;
    foreach(QString style, styleList)
    {
        QStringList propertyVal = style.split(":");
        QString prop = propertyVal.first().trimmed();
        QString newVal = propertyVal.at(1).trimmed();
        if(prop == "stroke")
        {
            newVal = attValue;
        }
        else if(prop == "fill")
        {
            newVal = attValue;
        }
        else
        {
            // no changes
        }
        newStyleList.append(prop + ":" + newVal);
    }

    e.setAttribute(attName, newStyleList.join(";"));
}

这是一个可以正常工作的正则表达式的例子。

/fill:(.*?)(?=;|$)/

转换为：

找到单词fill，然后是冒号，然后找到尽可能少的字符，直到找到分号或找到字符串的结尾。

在捕获组列表中，第一个组（在第0个之后）应包含属性值对值的字符串。

然后需要将此表达式放在QRegularExpression中并用于字符串。

http://doc.qt.io/qt-5/qregularexpression.html#details

希望有所帮助。

Qt：无法解析某些svg项目样式

1 个答案: