svg“使用”标签显示一个倒置的svg图标答案

【问题标题】：svg "use" tag displays an svg icon upside downsvg“使用”标签显示一个倒置的svg图标
【发布时间】：2016-06-07 12:50:59
【问题描述】：

我的设计师给了我一个 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>

【问题讨论】：

应该是因为你通过矩阵变换设置了scaleY(-1)的等价物。如果您不需要它，请将其删除。
我用 matrix(1 0 0 1 12.0002 12) 改变了矩阵，但唯一的改变是 html 也被反转了。应该在别处。
我用插画家改变了反面，然后导出为 SVG。结果是唯一的差异是翻转坐标的矩阵。我怀疑插画家和 svg Y 轴是倒置的。在“use”标签中使用 svg 文件时，嵌入的文件可能会被覆盖，然后显示为 illustrator 坐标。

标签： javascript css d3.js svg

【解决方案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>

我所做的是从变换中删除 scale(1,-1)。

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

【讨论】：

你是对的，但我认为 OP 的问题在于 SVG 中的 transform = matrix(...)。因为这已经颠倒了，他们不得不在 HTML 中做一个 scale(1,-1) 。至少我是这么理解的。
@Harry 如果是这样的话，为什么不直接用 illustrator 编辑它并重新保存 svg。因为无论如何它都是由他的设计师制作的。
没错。我也是这么想的。
@Harry，你说得对，第三个例子使用比例 (1,-1) 来显示我想要的。将 svg 倒置保存可能确实是一项工作。但无论如何，在 HTML 中使用时我应该反转它。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

在 Illustrator 中将对象转换为符号是一团糟。对象被倒置放置在符号内。然后该符号也会倒置放置在文档中，因此整体效果看起来不错。

【讨论】：