Блог

Главная - Вопросы по программированию - Svg неправильно отображается в средстве просмотра изображений Ubuntu 18.04

Svg неправильно отображается в средстве просмотра изображений Ubuntu 18.04

#xml #svg #vector-graphics

Вопрос:

Привет, я пытаюсь использовать файл svg, но он, похоже, отображается неправильно. Ниже приведен скриншот выходных данных, которые я получаю в средстве просмотра изображений при открытии файла test.svg и кода. Обратите внимание, что один и тот же код работает на таких сайтах, как w3schools.com. Но когда я создаю файл с именем test.svg, помещаю в него этот код и дважды щелкаю по нему после сохранения, я не получаю правильный вывод. Почему код не работает, когда я помещаю его в файл, но работает на онлайн-сайтах? Как я могу это решить?

 <?xml version="1.0" encoding="UTF-8" standalone="no" ?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="progress-radial" width="400px" height="400px" 
         viewBox="0 0 120 120" shape-rendering="geometricPrecision">
      <defs>
        <mask id="circle_mask" x="0" y="0" width="100" height="100" maskUnits="userSpaceOnUse">
          <circle cx="50" cy="50" r="51" 
                  stroke-width="0" fill="black" opacity="1"/>
          <circle id="bar" r="50" cx="50" cy="50" fill="transparent" 
                  stroke-dasharray="1" stroke-dashoffset="1000" stroke="white" stroke-width="9"></circle>
          <circle class="progress-radial-mask-inner" 
                  cx="50" cy="50" r="40" stroke-width="0" fill="black" opacity="1"/>
        </mask>
      </defs>
      <g mask="url(#circle_mask)">
        <circle class="progress-radial-track" cx="50" cy="50" r="50"  opacity="1" fill="#1a3331"/>
        <path class="progress-radial-bar" transform="translate(50, 50)" 
              d="M 0 0" fill="#66cdc3">
        </path>
      </g>
    </svg>

Неверный вывод:

Неверный вывод_в_имаге_вьюер

Это тот же пример кода на w3schools, и обратите внимание, что он работает там: работает здесь

Комментарии:

1. вы опустили пространство имен svg, но в целом, если в каком-либо программном обеспечении, которое вы используете, есть ошибки, найдите средство отслеживания ошибок этого программного обеспечения и сообщите об этом. Вы даже можете загрузить исходный код и исправить его, если сможете найти исходный код.

2. Я добавил xmlns=» w3.org/2000/svg » xmlns:xlink=» w3.org/1999/xlink » но все равно svg отображается неправильно. Можете ли вы изменить все необходимое и опубликовать это в качестве ответа, чтобы я мог принять этот ответ? Также я внес изменения в приведенный выше код стартового тега svg, вы можете проверить, не сделал ли я что-нибудь не так/не хватает. Спасибо

3. Ну, у вас есть некоторые элементы с атрибутами класса, но без CSS.

4. Как я могу это исправить? Обратите внимание, что если поместить один и тот же код в два тега <div>, переименовать файл как <div> test.html и открыть файл в браузере, он будет работать правильно. Но когда я использую код без каких-либо тегов <div>, файл test.svg неправильно отображается на моем локальном компьютере. @РобертЛонгсон

5. Я удалил все class= ссылки, но это все равно не работает. Можете ли вы написать исправленный код(который работает на локальной машине) в качестве ответа?

Метки: