html - SVG Angular 和 svg : prefix not working

Question

我正在使用 Angular 5.2.0 和 Inkscape。我只是想在我的模板中获得一个内联 SVG，这样我就可以在它上面放置一些过渡。但是，当我不在 angular 范围内时，此 SVG 呈现得很好，但是，我无法成功地让 SVG 在 Angular 中呈现。

到目前为止，我已经尝试最小化 svg 特定标签的数量，这样我就可以避免这个问题，但是，似乎我所拥有的标签都需要正确渲染图像(保留以下未剪切的版本)。

我还尝试将 svg: 前缀放在 SVG 中的每个标签前面，希望 Angular 能够识别它。我怀疑如果标签上没有其他前缀，这会起作用。

片段:
https://stackblitz.com/edit/angular-wmhj27?file=app%2Fapp.component.html

欢迎任何提示/建议。

我已经摆脱了所有其他可能的错误因素，所以我在组件模板中只有我的 svg:

<svg width="297mm"
  height="91mm"
  version="1.1"
  viewBox="0 0 297 91"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:cc="http://creativecommons.org/ns#"
  xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <svg:defs>
    <svg:linearGradient id="linearGradient3880"
      x1="65.8"
      x2="276"
      y1="188"
      y2="173"
      gradientUnits="userSpaceOnUse">
      <svg:stop offset="0" />
      <svg:stop stop-opacity="0"
        offset="1" />
    </svg:linearGradient>
  </svg:defs>
  <svg:metadata>
    <svg:rdf:RDF>
      <svg:cc:Work rdf:about="">
        <svg:dc:format>image/svg+xml</dc:format>
          <svg:dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
          <svg:dc:title/>
      </svg:cc:Work>
    </svg:rdf:RDF>
  </svg:metadata>
  <svg:g transform="translate(18.1 -119)">
    <svg:path d="m269 162c9e-3 -0.707 0.183-1.5 0.624-2.28 0.632-1.09 1.78-2.08 3.39-2.41v-1e-5c1.36-0.26 2.92-4e-3 4.26 1.01 1.17 0.904 2.03 2.31 2.16 4.03 0.0612 0.955-0.0915 1.91-0.462 2.79-0.349 0.833-0.841 1.59-1.45 2.23-1.15 1.19-2.51 2.03-3.9 2.58-2.61 1.09-5.39 1.62-7.82 2.37-2.04 0.736-4.16 1.6-4.96 2.98-0.694 0.861-1.01 2.21-1.23 3.81-0.181 1.56-0.0605 3.26-0.039 5.43 0.0601 2-0.0229 4.36-0.688 6.93-0.62 2.52-2.14 5.1-4.77 7.07-1.61 1.11-3.46 1.78-5.4 1.95h-2e-5c-1.88 0.162-3.76-0.105-5.51-0.787-3.36-1.37-6.02-3.91-7.52-7.1-1.42-3.01-1.96-6.26-1.72-9.38 0.215-3 0.927-5.81 1.89-8.39 1.78-4.93 4.19-9.08 5-13 0.388-1.84 0.576-3.62 0.26-5.1-0.312-1.4-0.874-2.73-1.7-3.39-0.868-0.935-2.67-1.39-4.27-1.27-1.64 0.102-3.44 1.08-4.95 2.43-1.5 1.35-2.66 3.35-3.56 5.59-0.881 2.23-1.36 4.81-1.7 7.61-0.624 5.48-0.434 11.9-1.95 19.1-0.75 3.52-2.09 7.15-4.26 10.6-2.16 3.42-5.32 6.42-9.36 8.39-5.97 2.68-12.6 2.58-18.3 0.0831-5.53-2.44-9.93-6.53-12.9-11.4l-2e-5 -2e-5c-5.61-9.56-6.66-20-6.78-29.3-0.478-9.14-0.402-17.7-3.71-24.1-1.27-2.56-2.89-4.89-4.84-6.54-0.477-0.404-0.972-0.768-1.49-1.08-2.56-1.58-5.7-2.42-8.16-1.78-2.58 0.379-5.18 2.55-7.3 5.13-2.16 2.71-3.61 6.4-5.02 10.4l-1e-5 1e-5c-1.39 4.13-2.57 8.54-4.46 13.2-1.86 4.79-4.69 9.55-8.9 13.5-6.75 5.89-15.3 8.17-23.1 7.82-8.07-0.327-15.4-2.7-21.8-5.45-6.79-2.87-12.8-6.02-18.6-8.25-6.34-2.38-12.3-3.88-17.9-3.46-5.84 0.301-11.5 2.64-16.3 5.51-5.47 3.28-10.3 7.75-14.4 11.8-13.5 13.6-23.7 23.5-29.3 26.4-2.56 1.29-3.87 1.51-3.88 1.08-0.01-0.408 0.917-1.3 2.63-2.89 4.44-4.11 12.3-14.2 25.4-29.4 3.89-4.55 8.85-9.71 15-14 5.42-3.76 12.2-6.93 20.1-7.83 7.51-0.739 15 0.636 22.2 3.19 6.61 2.29 12.9 5.3 19.2 7.73 5.91 2.22 12 4.13 17.9 4.08 5.52-0.0871 11.3-1.57 14.8-5.11 2.41-2.16 4.13-5.48 5.67-9.22 1.46-3.71 2.52-8 4.01-12.6l1e-5 -2e-5c1.41-4.56 3.43-9.45 6.74-14 3.29-4.62 8.32-8.42 14.6-9.98 6.34-1.29 12.7 0.0889 17.8 3.43 3.63 2.39 6.58 5.47 8.81 8.9 0.828 1.27 1.56 2.6 2.19 3.95 4.48 9.95 4.82 20.2 4.96 29.1 0.503 8.94 0.853 17.3 4.75 23.1l1e-5 1e-5c1.86 2.91 4.3 5.37 7.05 6.49 2.68 1.1 5.89 1.33 8.07 0.212 1.6-0.653 3.1-2.13 4.32-3.86 1.24-1.79 2.08-4.08 2.71-6.57 1.31-5.09 1.18-11.2 2.09-17.9 0.445-3.41 1.24-6.94 2.64-10.4 1.42-3.57 3.66-6.95 6.71-9.72 3.15-2.87 7.24-4.7 11.7-5.07 4.67-0.367 9.29 1.29 12.8 4.67 2.64 2.78 4.11 6.13 4.53 9.44 0.432 3.35 0.0796 6.5-0.713 9.28-1.65 5.76-4.31 10.1-5.9 13.9-0.807 2.02-1.42 3.89-1.59 5.64-0.159 1.79-0.0423 3.48 0.551 4.78 0.595 1.3 1.54 2.46 2.56 2.87 0.524 0.24 1.09 0.38 1.59 0.366h1e-5c0.504-0.0109 1.02-0.134 1.39-0.357 0.7-0.269 1.3-1.32 1.79-2.47 0.492-1.26 0.609-2.95 0.733-4.75 0.0907-1.97 0.136-4.05 0.533-6.36 0.383-2.46 1.4-4.92 3.14-7.01 2.68-2.85 5.94-4.06 8.63-4.55 3.03-0.655 5.52-0.817 7.5-1.44 1.02-0.342 1.83-0.642 2.36-1.11 0.284-0.235 0.519-0.478 0.668-0.726 0.155-0.257 0.265-0.522 0.29-0.753 0.071-0.384-0.0964-0.893-0.355-1.2-0.289-0.366-0.841-0.604-1.3-0.619-0.561-0.0333-1.17 0.257-1.54 0.631-0.503 0.492-0.71 1.25-0.696 1.83"

      fill="url(#linearGradient3880)"
      stroke="#000"
      stroke-width=".265px" />
  </svg:g>
</svg>

我的资源:
https://500tech.com/blog/all/svg-in-angular-2/
https://teropa.info/blog/2016/12/12/graphics-in-angular-2.html#avoiding-element-selectors-for-components
https://developer.mozilla.org/en-US/docs/Web/SVG/Namespaces_Crash_Course

Answer 1

似乎这里的主要问题是 angular 无法识别 svg 元数据标签中的标签，例如 rdf:RDF , cc:Work等等。

因此，如果您将它们全部删除，则应按预期工作。

<metadata>  
</metadata>

Stackblitz Example