Блог

Главная - Вопросы по программированию - Как подготовить SVG-код из Inkscape для шаблона директивы Angular JS / Angular Material app

Как подготовить SVG-код из Inkscape для шаблона директивы Angular JS / Angular Material app

#javascript #angularjs #svg #angularjs-directive

#javascript #angularjs #svg #angularjs-директива

Вопрос:

Я разветвил приложение CodePen командой Angular Material и пытаюсь заменить значок их аватара пользователя на значок, который я сделал в Inkscape.

Это их код в поле шаблона директивы приложения:

 <svg class="user-avatar" viewBox="0 0 128 128" height="64" width="64" pointer-events="none" display="block" > <path fill="#FF8A80" d="M0 0h128v128H0z"/> <path fill="#FFE0B2" d="M36.3 94.8c6.4 7.3 16.2 12.1 27.3 12.4 10.7-.3 20.3-4.7 26.7-11.6l.2.1c-17-13.3-12.9-23.4-8.5-28.6 1.3-1.2 2.8-2.5 4.4-3.9l13.1-11c1.5-1.2 2.6-3 2.9-5.1.6-4.4-2.5-8.4-6.9-9.1-1.5-.2-3 0-4.3.6-.3-1.3-.4-2.7-1.6-3.5-1.4-.9-2.8-1.7-4.2-2.5-7.1-3.9-14.9-6.6-23-7.9-5.4-.9-11-1.2-16.1.7-3.3 1.2-6.1 3.2-8.7 5.6-1.3 1.2-2.5 2.4-3.7 3.7l-1.8 1.9c-.3.3-.5.6-.8.8-.1.1-.2 0-.4.2.1.2.1.5.1.6-1-.3-2.1-.4-3.2-.2-4.4.6-7.5 4.7-6.9 9.1.3 2.1 1.3 3.8 2.8 5.1l11 9.3c1.8 1.5 3.3 3.8 4.6 5.7 1.5 2.3 2.8 4.9 3.5 7.6 1.7 6.8-.8 13.4-5.4 18.4-.5.6-1.1 1-1.4 1.7-.2.6-.4 1.3-.6 2-.4 1.5-.5 3.1-.3 4.6.4 3.1 1.8 6.1 4.1 8.2 3.3 3 8 4 12.4 4.5 5.2.6 10.5.7 15.7.2 4.5-.4 9.1-1.2 13-3.4 5.6-3.1 9.6-8.9 10.5-15.2M76.4 46c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6-.1-.9.7-1.6 1.6-1.6zm-25.7 0c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6-.1-.9.7-1.6 1.6-1.6z"/> <path fill="#E0F7FA" d="M105.3 106.1c-.9-1.3-1.3-1.9-1.3-1.9l-.2-.3c-.6-.9-1.2-1.7-1.9-2.4-3.2-3.5-7.3-5.4-11.4-5.7 0 0 .1 0 .1.1l-.2-.1c-6.4 6.9-16 11.3-26.7 11.6-11.2-.3-21.1-5.1-27.5-12.6-.1.2-.2.4-.2.5-3.1.9-6 2.7-8.4 5.4l-.2.2s-.5.6-1.5 1.7c-.9 1.1-2.2 2.6-3.7 4.5-3.1 3.9-7.2 9.5-11.7 16.6-.9 1.4-1.7 2.8-2.6 4.3h109.6c-3.4-7.1-6.5-12.8-8.9-16.9-1.5-2.2-2.6-3.8-3.3-5z"/> <circle fill="#444" cx="76.3" cy="47.5" r="2"/> <circle fill="#444" cx="50.7" cy="47.6" r="2"/> <path fill="#444" d="M48.1 27.4c4.5 5.9 15.5 12.1 42.4 8.4-2.2-6.9-6.8-12.6-12.6-16.4C95.1 20.9 92 10 92 10c-1.4 5.5-11.1 4.4-11.1 4.4H62.1c-1.7-.1-3.4 0-5.2.3-12.8 1.8-22.6 11.1-25.7 22.9 10.6-1.9 15.3-7.6 16.9-10.2z"/> </svg>

Код, который я вижу в редакторе Inkscape XML или при открытии SVG-файла с помощью Notepad , немного отличается:

 <svg
   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="210mm"
   height="297mm"
   viewBox="0 0 744.09448819 1052.3622047"
   id="svg2"
   version="1.1"
   inkscape:version="0.91 r13725"
   sodipodi:docname="rb icon.svg">
  <defs
     id="defs4">
    <linearGradient
       id="linearGradient4179"
       osb:paint="solid">
      <stop
         style="stop-color:#000000;stop-opacity:1;"
         offset="0"
         id="stop4181" />
    </linearGradient>
  </defs>
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="1.6394886"
     inkscape:cx="-607.16873"
     inkscape:cy="903.12934"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     showborder="false"
     showguides="false"
     inkscape:window-width="1536"
     inkscape:window-height="801"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <circle
       style="fill:#009cf0;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"
       id="path3336"
       cx="-602.85712"
       cy="69.505058"
       r="151.42857" />
    <rect
       style="fill:#ffffff;fill-opacity:1"
       id="rect4158"
       width="193.80003"
       height="144.85301"
       x="-699.19604"
       y="24.652056" />
    <rect
       style="fill:#ffffff;fill-opacity:1"
       id="rect4162"
       width="155.71428"
       height="155.71428"
       x="373.2374"
       y="322.82352"
       transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)" />
    <rect
       style="fill:#ffffff;fill-opacity:1"
       id="rect4173"
       width="19.512196"
       height="71.951218"
       x="-682.92682"
       y="-47.637794"
       ry="9.7560978" />
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"
       x="-635.36584"
       y="20.654888"
       id="text4195"
       sodipodi:linespacing="127%"><tspan
         sodipodi:role="line"
         id="tspan4197"
         x="-635.36584"
         y="20.654888"
         style="line-height:127%;-inkscape-font-specification:'sans-serif, Normal';font-family:sans-serif;font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal;font-size:60px;text-anchor:start;text-align:start;writing-mode:lr;fill:#009cf0;fill-opacity:1">R</tspan></text>
    <text
       xml:space="preserve"
       style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
       x="-597.46344"
       y="54.801228"
       id="text4199"
       sodipodi:linespacing="125%"><tspan
         sodipodi:role="line"
         id="tspan4201"
         x="-597.46344"
         y="54.801228"
         style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:60px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#009cf0;fill-opacity:1">B</tspan></text>
    <path
       style="fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:0.67507702;stroke-opacity:1"
       d="m -505.412,36.002405 20.333,0 0,38.1298 -20.333,0 z"
       id="rect4207"
       inkscape:connector-curvature="0" />
    <path
       style="fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:0.67507702;stroke-opacity:1"
       d="m -719.52832,35.102183 20.337,0 0,38.1298 -20.337,0 z"
       id="rect4207-6"
       inkscape:connector-curvature="0" />
    <rect
       style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none"
       id="rect4307"
       width="47.575813"
       height="54.895168"
       x="-626.08392"
       y="115.31452" />
  </g>
</svg>

и когда я пытаюсь заменить SVG-аватар пользователя по умолчанию на мой, это нарушает работу веб-сайта. Веб-консоль говорит

Неперехваченная ошибка синтаксиса: недопустимый или неожиданный токен.

Вот директива с исходным SVG:

 app.directive('userAvatar', function() {
  return {
    replace: true,
    template: '<svg class="user-avatar" viewBox="0 0 128 128" height="64" width="64" pointer-events="none" display="block" > <path fill="#FF8A80" d="M0 0h128v128H0z"/> <path fill="#FFE0B2" d="M36.3 94.8c6.4 7.3 16.2 12.1 27.3 12.4 10.7-.3 20.3-4.7 26.7-11.6l.2.1c-17-13.3-12.9-23.4-8.5-28.6 1.3-1.2 2.8-2.5 4.4-3.9l13.1-11c1.5-1.2 2.6-3 2.9-5.1.6-4.4-2.5-8.4-6.9-9.1-1.5-.2-3 0-4.3.6-.3-1.3-.4-2.7-1.6-3.5-1.4-.9-2.8-1.7-4.2-2.5-7.1-3.9-14.9-6.6-23-7.9-5.4-.9-11-1.2-16.1.7-3.3 1.2-6.1 3.2-8.7 5.6-1.3 1.2-2.5 2.4-3.7 3.7l-1.8 1.9c-.3.3-.5.6-.8.8-.1.1-.2 0-.4.2.1.2.1.5.1.6-1-.3-2.1-.4-3.2-.2-4.4.6-7.5 4.7-6.9 9.1.3 2.1 1.3 3.8 2.8 5.1l11 9.3c1.8 1.5 3.3 3.8 4.6 5.7 1.5 2.3 2.8 4.9 3.5 7.6 1.7 6.8-.8 13.4-5.4 18.4-.5.6-1.1 1-1.4 1.7-.2.6-.4 1.3-.6 2-.4 1.5-.5 3.1-.3 4.6.4 3.1 1.8 6.1 4.1 8.2 3.3 3 8 4 12.4 4.5 5.2.6 10.5.7 15.7.2 4.5-.4 9.1-1.2 13-3.4 5.6-3.1 9.6-8.9 10.5-15.2M76.4 46c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6-.1-.9.7-1.6 1.6-1.6zm-25.7 0c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6-.1-.9.7-1.6 1.6-1.6z"/> <path fill="#E0F7FA" d="M105.3 106.1c-.9-1.3-1.3-1.9-1.3-1.9l-.2-.3c-.6-.9-1.2-1.7-1.9-2.4-3.2-3.5-7.3-5.4-11.4-5.7 0 0 .1 0 .1.1l-.2-.1c-6.4 6.9-16 11.3-26.7 11.6-11.2-.3-21.1-5.1-27.5-12.6-.1.2-.2.4-.2.5-3.1.9-6 2.7-8.4 5.4l-.2.2s-.5.6-1.5 1.7c-.9 1.1-2.2 2.6-3.7 4.5-3.1 3.9-7.2 9.5-11.7 16.6-.9 1.4-1.7 2.8-2.6 4.3h109.6c-3.4-7.1-6.5-12.8-8.9-16.9-1.5-2.2-2.6-3.8-3.3-5z"/> <circle fill="#444" cx="76.3" cy="47.5" r="2"/> <circle fill="#444" cx="50.7" cy="47.6" r="2"/> <path fill="#444" d="M48.1 27.4c4.5 5.9 15.5 12.1 42.4 8.4-2.2-6.9-6.8-12.6-12.6-16.4C95.1 20.9 92 10 92 10c-1.4 5.5-11.1 4.4-11.1 4.4H62.1c-1.7-.1-3.4 0-5.2.3-12.8 1.8-22.6 11.1-25.7 22.9 10.6-1.9 15.3-7.6 16.9-10.2z"/> </svg>'
  };
});

Я перепробовал дюжину вариантов этого, но используя стиль из 1 строки, где я вставляю только class="user-avatar" в новый XML, вот как выглядит обновленная директива:

 app.directive('userAvatar', function() {
  return {
    replace: true,
    //template: '<svg class="user-avatar" viewBox="0 0 128 128" height="64" width="64" pointer-events="none" display="block" > <path fill="#FF8A80" d="M0 0h128v128H0z"/> <path fill="#FFE0B2" d="M36.3 94.8c6.4 7.3 16.2 12.1 27.3 12.4 10.7-.3 20.3-4.7 26.7-11.6l.2.1c-17-13.3-12.9-23.4-8.5-28.6 1.3-1.2 2.8-2.5 4.4-3.9l13.1-11c1.5-1.2 2.6-3 2.9-5.1.6-4.4-2.5-8.4-6.9-9.1-1.5-.2-3 0-4.3.6-.3-1.3-.4-2.7-1.6-3.5-1.4-.9-2.8-1.7-4.2-2.5-7.1-3.9-14.9-6.6-23-7.9-5.4-.9-11-1.2-16.1.7-3.3 1.2-6.1 3.2-8.7 5.6-1.3 1.2-2.5 2.4-3.7 3.7l-1.8 1.9c-.3.3-.5.6-.8.8-.1.1-.2 0-.4.2.1.2.1.5.1.6-1-.3-2.1-.4-3.2-.2-4.4.6-7.5 4.7-6.9 9.1.3 2.1 1.3 3.8 2.8 5.1l11 9.3c1.8 1.5 3.3 3.8 4.6 5.7 1.5 2.3 2.8 4.9 3.5 7.6 1.7 6.8-.8 13.4-5.4 18.4-.5.6-1.1 1-1.4 1.7-.2.6-.4 1.3-.6 2-.4 1.5-.5 3.1-.3 4.6.4 3.1 1.8 6.1 4.1 8.2 3.3 3 8 4 12.4 4.5 5.2.6 10.5.7 15.7.2 4.5-.4 9.1-1.2 13-3.4 5.6-3.1 9.6-8.9 10.5-15.2M76.4 46c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6-.1-.9.7-1.6 1.6-1.6zm-25.7 0c.9 0 1.6.7 1.6 1.6 0 .9-.7 1.6-1.6 1.6-.9 0-1.6-.7-1.6-1.6-.1-.9.7-1.6 1.6-1.6z"/> <path fill="#E0F7FA" d="M105.3 106.1c-.9-1.3-1.3-1.9-1.3-1.9l-.2-.3c-.6-.9-1.2-1.7-1.9-2.4-3.2-3.5-7.3-5.4-11.4-5.7 0 0 .1 0 .1.1l-.2-.1c-6.4 6.9-16 11.3-26.7 11.6-11.2-.3-21.1-5.1-27.5-12.6-.1.2-.2.4-.2.5-3.1.9-6 2.7-8.4 5.4l-.2.2s-.5.6-1.5 1.7c-.9 1.1-2.2 2.6-3.7 4.5-3.1 3.9-7.2 9.5-11.7 16.6-.9 1.4-1.7 2.8-2.6 4.3h109.6c-3.4-7.1-6.5-12.8-8.9-16.9-1.5-2.2-2.6-3.8-3.3-5z"/> <circle fill="#444" cx="76.3" cy="47.5" r="2"/> <circle fill="#444" cx="50.7" cy="47.6" r="2"/> <path fill="#444" d="M48.1 27.4c4.5 5.9 15.5 12.1 42.4 8.4-2.2-6.9-6.8-12.6-12.6-16.4C95.1 20.9 92 10 92 10c-1.4 5.5-11.1 4.4-11.1 4.4H62.1c-1.7-.1-3.4 0-5.2.3-12.8 1.8-22.6 11.1-25.7 22.9 10.6-1.9 15.3-7.6 16.9-10.2z"/> </svg>'
    template: '<svg   class="user-avatar"  xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"    xmlns:dc="http://purl.org/dc/elements/1.1/"    xmlns:cc="http://creativecommons.org/ns#"    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"    xmlns:svg="http://www.w3.org/2000/svg"    xmlns="http://www.w3.org/2000/svg"    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"    width="210mm"    height="297mm"    viewBox="0 0 744.09448819 1052.3622047"    id="svg2"    version="1.1"    inkscape:version="0.91 r13725"    sodipodi:docname="rb icon.svg">   <defs      id="defs4">     <linearGradient        id="linearGradient4179"        osb:paint="solid">       <stop          style="stop-color:#000000;stop-opacity:1;"          offset="0"          id="stop4181" />     </linearGradient>   </defs>   <sodipodi:namedview      id="base"      pagecolor="#ffffff"      bordercolor="#666666"      borderopacity="1.0"      inkscape:pageopacity="0.0"      inkscape:pageshadow="2"      inkscape:zoom="1.6394886"      inkscape:cx="-607.16873"      inkscape:cy="903.12934"      inkscape:document-units="px"      inkscape:current-layer="layer1"      showgrid="false"      showborder="false"      showguides="false"      inkscape:window-width="1536"      inkscape:window-height="801"      inkscape:window-x="-8"      inkscape:window-y="-8"      inkscape:window-maximized="1" />   <metadata      id="metadata7">     <rdf:RDF>       <cc:Work          rdf:about="">         <dc:format>image/svg xml</dc:format>         <dc:type            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />         <dc:title></dc:title>       </cc:Work>     </rdf:RDF>   </metadata>   <g      inkscape:label="Layer 1"      inkscape:groupmode="layer"      id="layer1">     <circle        style="fill:#009cf0;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;fill-opacity:1"        id="path3336"        cx="-602.85712"        cy="69.505058"        r="151.42857" />     <rect        style="fill:#ffffff;fill-opacity:1"        id="rect4158"        width="193.80003"        height="144.85301"        x="-699.19604"        y="24.652056" />     <rect        style="fill:#ffffff;fill-opacity:1"        id="rect4162"        width="155.71428"        height="155.71428"        x="373.2374"        y="322.82352"        transform="matrix(-0.70710678,0.70710678,-0.70710678,-0.70710678,0,0)" />     <rect        style="fill:#ffffff;fill-opacity:1"        id="rect4173"        width="19.512196"        height="71.951218"        x="-682.92682"        y="-47.637794"        ry="9.7560978" />     <text        xml:space="preserve"        style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;"        x="-635.36584"        y="20.654888"        id="text4195"        sodipodi:linespacing="127%"><tspan          sodipodi:role="line"          id="tspan4197"          x="-635.36584"          y="20.654888"          style="line-height:127%;-inkscape-font-specification:'sans-serif, Normal';font-family:sans-serif;font-weight:normal;font-style:normal;font-stretch:normal;font-variant:normal;font-size:60px;text-anchor:start;text-align:start;writing-mode:lr;fill:#009cf0;fill-opacity:1">R</tspan></text>     <text        xml:space="preserve"        style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"        x="-597.46344"        y="54.801228"        id="text4199"        sodipodi:linespacing="125%"><tspan          sodipodi:role="line"          id="tspan4201"          x="-597.46344"          y="54.801228"          style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:60px;line-height:125%;font-family:sans-serif;-inkscape-font-specification:'sans-serif, Normal';text-align:start;writing-mode:lr-tb;text-anchor:start;fill:#009cf0;fill-opacity:1">B</tspan></text>     <path        style="fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:0.67507702;stroke-opacity:1"        d="m -505.412,36.002405 20.333,0 0,38.1298 -20.333,0 z"        id="rect4207"        inkscape:connector-curvature="0" />     <path        style="fill:#009cf0;fill-opacity:1;stroke:none;stroke-width:0.67507702;stroke-opacity:1"        d="m -719.52832,35.102183 20.337,0 0,38.1298 -20.337,0 z"        id="rect4207-6"        inkscape:connector-curvature="0" />     <rect        style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-opacity:1;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none"        id="rect4307"        width="47.575813"        height="54.895168"        x="-626.08392"        y="115.31452" />   </g> </svg>'
  };
});

введите описание изображения здесь

Вы можете воспроизвести ошибку, заменив исходную директиву на приведенную выше в приложении CodePen.

Оригинал: https://codepen.io/team/AngularMaterial/pen/mVxgbg

Сломано: https://codepen.io/hack-r/pen/LRdVPN

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

1. что именно означает «ломает веб-сайт»?

2. @RobertLongson Я использую инструмент синхронизации браузера npm для просмотра изменений, а модуль Angular захлебывается кодом и ничего не может отобразить, когда вы добавляете это. Даже в Atom (текстовый редактор Github) почти весь этот XML отображается красным цветом, указывая, что его нельзя интерпретировать, когда он находится внутри директивы. Веб-консоль сообщает Uncaught SyntaxError: Invalid or unexpected token .

3. Глупый вопрос, но чтобы обновить эту исходную директиву, вам нужно будет объединить все новые строки SVG в одну строку. Вы это делаете? В противном случае вы показываете нам фрагмент, скрипку или обновленный codepen, чтобы мы могли точно видеть, что вы делаете неправильно.

4. @PaulLeBeau Конечно, я добавлю фрагмент. Обновление: добавлено. Я думал, что ответ будет заключаться в том, что мне нужно удалить некоторые поля XML в коде Inkscape, но пока мне это не удалось. Обратите внимание, что во фрагменте, который я добавил, это 1-строчная версия с class="user-avatar" , но я попробовал ее многострочной, с новым именем класса, Без имени класса и т. Д. И т. Д., И ничего не изменилось.

5. Я также пробовал это с разными размерами изображения, со сжатием и без сжатия.

Ответ №1:

Это типичная " ' проблема, которая возникает ' внутри вашей строки, представляющей svg, измените все ' на " , и это сработает. Первый из них в svg 'sans-serif, Normal' .

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