svg «use» tag показывает значок svg с ног на голову

Мой дизайнер дал мне значок svg. Я показываю этот значок в макете дерева D3.js. Чтобы изменить цвета, я вставляю значок в тег.svg «use» tag показывает значок svg с ног на голову

Странно, что икона перевернута вверх дном (используя хром). Я действительно не понимаю, что там происходит.

я должен применить преобразование, чтобы получить это право

Любая идея?

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>

источник

2016-06-07 user3738021

Это должно быть потому, что вы устанавливаете эквивалент 'scaleY (-1)' через матричное преобразование. Если вам это не нужно, удалите его. – Harry

Я сменил матрицу на матрицу (1 0 0 1 12 0002 12), но единственным изменением является html , который также отменяется. должно быть в другом месте. – user3738021

Я играл с иллюстратором, перевернувшим обратные стороны, затем экспортируя в SVG. В результате единственный diff - это матрица для перевода координат. Я подозреваю, что иллюстратор и ось SVv инвертированы. При использовании файла svg внутри тега «use» встроенный может быть переопределен, а затем отображен с координатами иллюстратора. – user3738021

заменить 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) от преобразования.

то, что вы делаете со шкалой, в основном переворачивает ось Y с -1 вот почему она перевернута.

источник

2016-06-07 12:59:16 Bamieh

Вы правы, но я думаю, что проблема OP связана с 'transform = matrix (...)' в SVG. Поскольку это уже перевернуто, они должны делать масштаб (1, -1) в HTML. Это то, что я понял по крайней мере. – Harry

@Harry Возможно, если это так, почему бы просто не отредактировать его с помощью иллюстратора и не перезапустить svg. так как он сделан его дизайнером в любом случае. – Bamieh

Точно. Это то, о чем я тоже думал. – Harry

svg «use» tag показывает значок svg с ног на голову

ответ

Смежные вопросы