angularjs SVG的不同显示取决于html标签

7kjnsjlb 于 2023-09-30 发布在 Angular

关注(0)|答案(1)|浏览(119)

我使用的是Angular 15。我注意到奇怪的事情，当我添加svg圆圈的标签，它显示正常，但当我把它作为只是原始svg它显示奇怪。请参见屏幕截图。
通过img标签添加的图标：enter image description here图标仅由原始svg添加：enter image description here
图标代码：

<svg id="Group_10215" data-name="Group 10215" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20">
  <defs>
    <clipPath id="clip-path">
      <rect id="Shape_103" data-name="Shape 103" width="20" height="20" rx="10" fill="none" stroke="#140f4b" stroke-width="1.5"/>
    </clipPath>
  </defs>
  <g id="Shape_103-2" data-name="Shape 103" fill="none" stroke="#140f4b" stroke-width="1.5">
    <rect width="20" height="20" rx="10" stroke="none"/>
    <rect x="0.75" y="0.75" width="18.5" height="18.5" rx="9.25" fill="none"/>
  </g>
  <g id="Mask_Group_109" data-name="Mask Group 109" clip-path="url(#clip-path)">
    <path id="Path_12329" data-name="Path 12329" d="M11,0H0V22H11Z" transform="translate(-1 -1)" fill="#140f4b"/>
  </g>
</svg>

有人知道怎么回事吗？
我想通过添加原始svg到html中来正确显示圆形svg

angularjs

来源：https://stackoverflow.com/questions/76977576/svg-different-display-depends-on-the-html-tag

1条答案

按热度按时间

pkwftd7m1#

就像评论的那样，你可能有更多的相同的ID，然后剪辑路径就乱了。一般来说，ID必须是唯一的，然后尽量避免使用太多。您可以在一个单独的SVG元素中定义clip-path，然后让需要该clip-path的所有其他元素引用它。

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0"
  style="position:absolute">
  <defs>
    <clipPath id="clip-path">
      <rect width="20" height="20" rx="10" />
    </clipPath>
  </defs>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
  viewBox="0 0 20 20">
  <g fill="none" stroke="#140f4b" stroke-width="1.5">
    <rect width="20" height="20" rx="10" stroke="none"/>
    <rect x="0.75" y="0.75" width="18.5" height="18.5"
      rx="9.25" fill="none"/>
  </g>
  <g clip-path="url(#clip-path)">
    <path d="M11,0H0V22H11Z" transform="translate(-1 -1)"
      fill="#140f4b"/>
  </g>
</svg>

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
  viewBox="0 0 20 20">
  <g fill="none" stroke="#140f4b" stroke-width="1.5">
    <rect width="20" height="20" rx="10" stroke="none"/>
    <rect x="0.75" y="0.75" width="18.5" height="18.5"
      rx="9.25" fill="none"/>
  </g>
  <g clip-path="url(#clip-path)">
    <path d="M11,0H0V22H11Z" transform="translate(-1 -1)"
      fill="#140f4b"/>
  </g>
</svg>

您还可以简化SVG（并删除所有ID）：

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
  viewBox="0 0 20 20">
  <path d="M 10 0 a 1 1 0 0 0 0 20 z" fill="#140f4b" />
  <circle cx="10" cy="10" r="9.25" stroke="#140f4b"
    stroke-width="1.5" fill="none" />
</svg>

赞(0）回复(0）举报 2023-09-30

我来回答

angularjs SVG的不同显示取决于html标签

1条答案

相关问题

热门标签

最新问答