javascript - svg "use"标签显示一个颠倒的 svg 图标

Question

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

奇怪的是图标显示颠倒了(使用 chrome)。 我真的不明白那里发生了什么。

我必须应用转换才能使其正确

有什么想法吗？

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)。

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