svg“use”标签显示svg图标颠倒

Question

我的设计师给了我一个svg图标。 我在D3.js树布局中显示此图标。 为了能够更改颜色，我将图标嵌入标签中。

奇怪的是，图标是颠倒的（使用铬）。 我真的不明白那里发生了什么。

我必须应用转换以使其正确

任何想法？

HTML：

    <img src="/assets/img/PurchaseOrder.svg" />
    <svg class="menu-icon" width="150" height="150"  style="opacity: 1;"><use x="0"y="0"width="50" height="50" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/img/PurchaseOrder.svg#PurchaseOrder.svg"></use></svg>
    <svg class="menu-icon" width="150" height="150"  style="opacity: 1;"><use x="0"y="0"width="50" height="50" transform="scale(1,-1) translate(0,-50)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/img/PurchaseOrder.svg#PurchaseOrder.svg"></use></svg>

CSS

.menu-icon {
        pointer-events: none;
        fill:#626469;
    }

结果

svg：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="24px" height="24px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<symbol  id="ProjectOrder.svg" viewBox="-12 -12 24 24">
    . . .
</symbol>
<use xlink:href="#ProjectOrder.svg"  width="24" height="24" x="-12" y="-12" transform="matrix(1 0 0 -1 11.9995 11.9995)" style="overflow:visible;"/>
</svg>

Answer 1

使用以下

替换HTML

<img src="/assets/img/PurchaseOrder.svg" />
    <svg class="menu-icon" width="150" height="150"  style="opacity: 1;"><use x="0"y="0"width="50" height="50" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/img/PurchaseOrder.svg#PurchaseOrder.svg"></use></svg>
    <svg class="menu-icon" width="150" height="150"  style="opacity: 1;"><use x="0"y="0"width="50" height="50" transform="translate(0,-50)" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/img/PurchaseOrder.svg#PurchaseOrder.svg"></use></svg>

我所做的是从变换中删除比例（1，-1）。

你在做什么比例基本上是用-1翻转Y轴 这就是为什么它是颠倒的。

Answer 2

css属性 transform: rotate(180deg);会翻转。

Answer 3

这看起来与我在这里提出的问题相同： https://graphicdesign.stackexchange.com/questions/76574/adobe-illustrator-svg-upside-down-transform-matrix。

在illustrator中将对象转换为符号很麻烦。 该对象上下颠倒放置在符号内。然后将该符号也上下颠倒地放置在文档中，因此整体效果看起来不错。