加载有对象标签的外部 SVG 不使用定义的剪辑路径

Question

当通过对象标签加载外部 SVG 时，它没有使用我定义的剪辑路径。当 SVG 是内联时，剪辑路径可以正常工作，但由于 SVG 的大小（受当前 CMS 中的行数限制），我需要在外部引用它。

HTML -

<div class="cin-svg">
   <object id="cin-logo" data="Dist-SVGs.svg#CIN" type="image/svg+xml">
      #document
          <svg id="CIN" viewBox="0 0 304 280" fill="black" xmlns="http://www.w3.org/2000/svg">
          ...
          </svg>
   </object>
</div>

距离-SVG.svg-

<svg id="CIN" viewBox="0 0 304 280" fill="black" xmlns="http://www.w3.org/2000/svg">
   <style>
      #CIN #cin-strokes{
         fill: none;
         stroke: black;
         stroke-miterlimit: 10;
      }
      #CIN #cin-strokes #cls-1{
         stroke-width: 6px;
      }
      ...
   </style>
   <g id="cin-clips">
      <clippath id="outer-circle-left">
         <path d="M39.7399 124.91L40.8899 124.74C40.9499 124.52 40.9999 124.3 41.0599 124.08C41.4599 122.62 41.8599 121.15 42.2699 119.68C42.3052 119.594 42.3523 119.513 42.4099 119.44C43.0773 118.654 43.4331 117.651 43.4099 116.62C43.4263 116.295 43.5454 115.983 43.7499 115.73C44.8899 114.1 45.3399 112.16 46.0599 110.36C46.5752 108.908 47.3363 107.555 48.3099 106.36C49.1849 105.455 49.8178 104.344 50.1499 103.13C50.2971 102.642 50.5421 102.19 50.8699 101.8C52.0899 100.23 53.3799 98.71 54.5899 97.13C55.481 96.1243 56.2497 95.0166 56.8799 93.83C57.3302 92.7682 58.0137 91.8214 58.8799 91.06C60.1904 89.8338 61.3396 88.446 62.2999 86.93C62.6068 86.3109 62.874 85.673 63.0999 85.02C63.3549 84.3913 63.6697 83.7885 64.0399 83.22C64.4463 82.6549 64.9123 82.1353 65.4299 81.67C66.5336 80.5694 67.6917 79.5247 68.8999 78.54C69.5783 78.0734 70.1592 77.479 70.6099 76.79C70.8363 76.3368 71.1628 75.941 71.5648 75.6326C71.9667 75.3242 72.4336 75.1113 72.9299 75.01C73.5263 74.8083 74.065 74.4652 74.4999 74.01C75.2624 73.3375 75.9869 72.623 76.6699 71.87C78.1899 70.2 79.6699 68.49 81.1699 66.8C81.7799 66.12 82.4199 65.45 83.0599 64.8C83.2753 64.6429 83.4476 64.4342 83.5612 64.193C83.6748 63.9519 83.7259 63.6861 83.7099 63.42C83.2499 63.77 82.9199 64.01 82.6099 64.27C81.1599 65.54 79.7899 66.93 78.2399 68.06C76.1273 69.5467 74.1223 71.1807 72.2399 72.95C70.7259 74.304 69.2934 75.7465 67.9499 77.27C66.0516 79.8326 63.8787 82.1799 61.4699 84.27C61.201 84.5238 60.9596 84.8054 60.7499 85.11C60.0999 85.89 59.4299 86.66 58.7999 87.46C57.6494 88.7232 56.6121 90.0851 55.6999 91.53C55.0032 92.8752 54.1507 94.1339 53.1599 95.28C52.9673 95.4796 52.7901 95.6935 52.6299 95.92C51.6899 97.39 50.4799 98.69 49.9299 100.42C49.6723 100.973 49.3354 101.485 48.9299 101.94C48.4199 102.66 47.9299 103.35 47.3799 104.07C46.6099 105.16 46.1499 106.48 45.3799 107.55C43.8099 109.84 43.1599 112.55 41.6899 114.87C41.6288 114.997 41.5851 115.131 41.5599 115.27C40.935 117.45 40.1633 119.585 39.2499 121.66C39.0528 122.184 38.9088 122.727 38.8199 123.28C38.7699 123.5 38.7299 123.73 38.6799 123.95C38.9824 124.256 39.2538 124.591 39.4899 124.95L39.7399 124.91Z" fill="black"/>
      </clippath>
      ...
   </g>
   <g id="strokes">
      <polyline id="o-c-l" clip-path="url(#outer-circle-left)" class="cls-1" points="40.039 126.135 47.716 107.217 56.088 94.696 62.234 86.38 69.897 76.935 78.789 69.245 88.745 60.935 100.299 54.675 111.734 50.8 122.103 46.015 130.179 44.045 133.294 41.772"/>
      ...
   </g>
</svg>

Answer 1

是否可以像您在第一行中终止对象标记，然后稍后在代码中再次终止它一样简单：

<object id="cin-logo" data="Dist-SVGs.svg#CIN" type="image/svg+xml"></object>

Answer 2

如 Robert Longson 所述，clip-path 元素是“clipPath”，而不是“clippath”。 SVG 区分大小写。

加载有对象标签的外部 SVG 不使用定义的剪辑路径

External SVG loaded with object tag not using defined clip paths

html

svg