Почему мой генерируемый SVG-файл по-разному отображается в Inkscape и (Chrome) браузере? - PullRequest
0 голосов
/ 25 октября 2019

Я программно сгенерировал содержание SVG, показанное ниже.

Если я открою его в браузере (Chrome 77.0.3865.75 или Firefox 68.1.0esr (64-разрядная версия)), метки оси «z», «y» будут показаны в ожидаемых позициях:

enter image description here

Однако, если я открою его в Inkscape (0.92.4), метки осей будут показаны в верхнем левом углу. Метки тиков также перемещены в неправильные позиции.

enter image description here

=> Как я могу гарантировать, что мой SVG-файл может использоваться как с браузерами, так и с Inkscape?

Открытая в Inkcape, метка z имеет координаты ок. х = 90, у = 548. Если я переместу метку туда, где я хочу, новые координаты будут ок. x = 290, y = 50.

Может ли быть так, что браузеры и Inkscape используют разные единицы измерения по умолчанию или контрольные точки? Или что я должен включить какой-то дополнительный заголовок для Inkcape, чтобы правильно отобразить файл?

<svg xmlns="http://www.w3.org/2000/svg" class="treez-svg" id="treez-svg" width="15cm" height="15cm"><g id="page" display="inline"><rect fill="#ffffff" width="15cm" height="15cm"/><g id="graph" transform="translate(94.48818897637794,18.89763779527559)" display="inline"><rect width="12cm" height="12cm" fill="#ffffff" fill-opacity="1" stroke="#000000" stroke-width="2" stroke-dasharray="none" stroke-opacity="1"/><g class="axis" id="x" display="inline"><g id="primary" class="primary" transform="translate(0,453.54330708661416)" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="currentColor" d="M0.5,0.5H454.04330708661416"/><g class="tick" opacity="1" transform="translate(0.5,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">0.0</text></g><g class="tick" opacity="1" transform="translate(45.85433070866142,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">0.1</text></g><g class="tick" opacity="1" transform="translate(91.20866141732284,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">0.2</text></g><g class="tick" opacity="1" transform="translate(136.56299212598424,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">0.3</text></g><g class="tick" opacity="1" transform="translate(181.9173228346457,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">0.4</text></g><g class="tick" opacity="1" transform="translate(227.27165354330708,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">0.5</text></g><g class="tick" opacity="1" transform="translate(272.6259842519685,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">0.6</text></g><g class="tick" opacity="1" transform="translate(317.98031496062987,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">0.7</text></g><g class="tick" opacity="1" transform="translate(363.3346456692914,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">0.8</text></g><g class="tick" opacity="1" transform="translate(408.68897637795277,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">0.9</text></g><g class="tick" opacity="1" transform="translate(454.04330708661416,0)"><line stroke="currentColor" y2="6"/><text fill="black" y="0" dy="0" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(0,29),rotate(0)">1.0</text></g></g><g id="secondary" class="secondary" fill="none" font-size="10" font-family="sans-serif" text-anchor="middle"><path class="domain" stroke="currentColor" d="M0.5,0.5H454.04330708661416"/><g class="tick" opacity="1" transform="translate(0.5,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g><g class="tick" opacity="1" transform="translate(45.85433070866142,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g><g class="tick" opacity="1" transform="translate(91.20866141732284,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g><g class="tick" opacity="1" transform="translate(136.56299212598424,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g><g class="tick" opacity="1" transform="translate(181.9173228346457,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g><g class="tick" opacity="1" transform="translate(227.27165354330708,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g><g class="tick" opacity="1" transform="translate(272.6259842519685,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g><g class="tick" opacity="1" transform="translate(317.98031496062987,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g><g class="tick" opacity="1" transform="translate(363.3346456692914,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g><g class="tick" opacity="1" transform="translate(408.68897637795277,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g><g class="tick" opacity="1" transform="translate(454.04330708661416,0)"><line stroke="currentColor" y2="-6"/><text fill="currentColor" y="-9" dy="0em"/></g></g><g id="axis-label"><text text-anchor="middle" transform="translate(226.77165354330708,508.54330708661416),rotate(0)" font-family="sans-serif" font-size="22" fill="black" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1">z</text></g></g><g class="axis" id="y" display="inline"><g id="primary" class="primary" fill="none" font-size="10" font-family="sans-serif" text-anchor="end"><path class="domain" stroke="currentColor" d="M0.5,454.04330708661416V0.5"/><g class="tick" opacity="1" transform="translate(0,454.04330708661416)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">0.0</text></g><g class="tick" opacity="1" transform="translate(0,408.6889763779527)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">0.1</text></g><g class="tick" opacity="1" transform="translate(0,363.3346456692913)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">0.2</text></g><g class="tick" opacity="1" transform="translate(0,317.9803149606299)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">0.3</text></g><g class="tick" opacity="1" transform="translate(0,272.6259842519685)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">0.4</text></g><g class="tick" opacity="1" transform="translate(0,227.27165354330708)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">0.5</text></g><g class="tick" opacity="1" transform="translate(0,181.9173228346457)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">0.6</text></g><g class="tick" opacity="1" transform="translate(0,136.5629921259843)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">0.7</text></g><g class="tick" opacity="1" transform="translate(0,91.20866141732279)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">0.8</text></g><g class="tick" opacity="1" transform="translate(0,45.854330708661394)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">0.9</text></g><g class="tick" opacity="1" transform="translate(0,0.5)"><line stroke="currentColor" x2="-6"/><text fill="black" x="6" dy="0.32em" font-family="sans-serif" font-size="22" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1" transform="translate(-10,0),rotate(0)">1.0</text></g></g><g id="secondary" class="secondary" transform="translate(453.54330708661416,0)" fill="none" font-size="10" font-family="sans-serif" text-anchor="start"><path class="domain" stroke="currentColor" d="M0.5,454.04330708661416V0.5"/><g class="tick" opacity="1" transform="translate(0,454.04330708661416)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,408.6889763779527)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,363.3346456692913)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,317.9803149606299)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,272.6259842519685)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,227.27165354330708)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,181.9173228346457)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,136.5629921259843)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,91.20866141732279)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,45.854330708661394)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g><g class="tick" opacity="1" transform="translate(0,0.5)"><line stroke="currentColor" x2="6"/><text fill="currentColor" x="9" dy="0.32em"/></g></g><g id="axis-label"><text text-anchor="middle" transform="translate(-82,226.77165354330708),rotate(-90)" font-family="sans-serif" font-size="22" fill="black" font-style="normal" font-weight="normal" text-decoration="none" fill-opacity="1">y</text></g></g></g></g></svg>

1 Ответ

1 голос
/ 27 октября 2019

Ваш SVG интерпретируется в Firefox иначе, чем в Inkscape. В частности, Inkscape, похоже, игнорирует атрибуты transform, где между двумя различными инструкциями есть запятая (например, rotate, translate и т. Д.).

Я не уверен, что это ошибка в Inkscape или Firefox там особенно отказоустойчив.

Вы можете исправить это, если выполните поиск и замену для '), r 'и замените его на') r '.

...