如何为 div“shape-outside”属性引用嵌入的 SVG 路径？答案

【问题标题】：How can I reference an embedded SVG path for a div "shape-outside" attribute?如何为 div“shape-outside”属性引用嵌入的 SVG 路径？
【发布时间】：2016-03-12 02:56:48
【问题描述】：

我想使用url("<path>") 语法将shape-outside 属性引用到我的嵌入式SVG，但我不知道如何。这是我尝试过的设置：

svg {
  display: none;
}
.myShape {
  -webkit-shape-outside: url("#mainPath");
  shape-outside: url("#mainPath");
  float: left;
  display:inline-flex;
  max-width: 624.453px;
  max-height: 919px;
  width:100%;
  height: 624.453px;
}
.fitting {
  /* */
}

<svg id="mainSVG" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 901.92 612.86">
  <defs>
    <style>
      /*.a{isolation:isolate;*/
    }
    .b {
      fill: #1b1464;
    }
    </style>
    <title>fitting</title>
    <g id="mainGroup" class="a">
      <clipPath id="mainPath" clipPathUnits="objectBoundingBox">
        <path class="b" d="M454.33,254a4.35,4.35,0,0,0,.72-0.79C454.07,254,453.41,254.8,454.33,254ZM1215,674.9c-8.62-.69-9.69,7.56-15.17,15.83-15.08.59-18.63,0.73-24.41,0.66-3.53-6.15-2.61-16.27-6.6-16.49-12.41-2.58-3.38,14.81-7.26,14.51-12.77-.17-27.52.64-30.28-2.91-4.92-4.13-9.53-2.51-9.6-3.17q-4-38.55-10.93-83C1081,493.87,1074.39,497.25,1065.87,481a57.11,57.11,0,0,1,2-13.19s-6-11.88-6.6-18.47-3-23.35.66-61.35c1.47-42.94-.28-61.49-4.62-80.48s-7.26-26.39-7.26-26.39a79.29,79.29,0,0,0,8.58,0c2.57-.29,8.65-7.42,10.56-9.9s7.78-1.28,5.94-7.92-2.23-9.55-.66-13.85-1.34-3.18,4-5.94,4.07-1.32,9.9-5.94,8.81-4.54,12.53-13.85,4.42-2.64,7.92-14.51c3.23-11,6.23-9.55,6-19.13H861.16c-2.6,11.44-5,22-5.08,23.09-4.63,2.34-10.56.66-10.56,0.66s-18.9-11.36-38.92-11.87a24.65,24.65,0,0,0-10.56-2c-4.12.05-9.12-.9-12.53,0s-8.77,2.22-9.9,2c-0.49-.1,1.94-5.42,5-11.87h-32c0,0.23,0,.45,0,0.66,0,1.68-9.67-.64-11.87.66s-4.21,5.14-4.62,8.58a15.78,15.78,0,0,1-4.62,7.26,29,29,0,0,0-5.94,4c-3.09,2.64-4.17,2.75-4.62,5.94s0.93,19,2.64,25.73,8.61,16.87,11.21,21.11c-0.21,6.77-.25,24.59,1.32,26.39s4.87-1.91,6.6-3.3c1.73,2.28,4.52,17.33,7.92,23.75s3.43,9.63,7.92,12.53,16.38,4.95,16.49-5.94c-2.14-8.63-4.66-10.27-5.94-16.49s-7.41-18-6.6-52.12c1.38-9.33,3.1-10.29,8.58-11.21s84.83-7.46,88.4-4.62c-0.09,7.35.09,29.29,0,29s-1.5,55.76-.66,73.23c-4.23,1.41-13.87,1.8-22.43,34.3-3.77,12.22-7.28,34.16-7.92,50.8-10.22,8.47-21.87,18-23.09,19.13-4.88,0-22.48-5.05-31-4.62-9.93-1.54-24.47-8.59-31-10.56-8.23-4.78-35.93-10.32-42.22-11.21-12.49-5.12-31.9-15.85-48.82-30.35a13.5,13.5,0,0,0-2-4s-29.71-31.87-32.33-34.3-3.51-8.73-2.64-11.21c-0.82-.8-2-2-2-2s2.54-.93,3.3-2-0.66-2.64-.66-2.64-0.58-6.43,0-7.92,0.73-.32,5.94-2.64,6.39-4.66,4.62-11.21-11.65-13.89-16.49-21.11c-3.1-8.16,1.8-14.8-1.32-23.09s-9.39-11.87-10.56-19.79c2.15-.5,6.49,0,8.58-4s3.75-9,0-13.85-6.45-2.09-6.6-4-1.42-7.12-5.28-7.26-8.83-.61-9.9-1.32-2.28-2.89-4-3.3a5.83,5.83,0,0,0-4.62.66c-1.16.83-2.82-2.91-5.94-4s-4.87.21-6.6-.66-1.4-3-3.3-3.3-0.87-.3-4.62-2.64-0.56-2.09-5.94-2-8.75,2-11.87,2-5.5.41-6.6,1.32-3.71.43-7.26,0.66c-3.79-2-6.94-3.87-8.58-4s-8.65.33-9.9,0a11.92,11.92,0,0,0-5.28-.66c-2.31.33-6.11,5.69-9.9,5.94s-3.33,4.12-4.62,4.62-0.8,1.56-4.62,4-6.63,5.48-7.26,7.92-2.44,6.24-4.62,7.92,4.27-3.2,4.62-2,1.52,2.17-2.64,4.62-2,5.58-4.62,7.92a12.72,12.72,0,0,0-4.62,9.24c-0.39,3.9.07,6.57-1.26,8.45,1.39-1.14,3.43-2.33,2.58.79-1.45,5.31,10.54-1,5.28,2s-6.15,2.91-6.6,7.92,0.35,8.1,2,9.24c-0.16,1.46-3.34,2.42-2.64,6.6s2,4.45,4.62,9.9,2.9,20.77,9.24,19.79c-23.75,14.51-56.61,41.2-75.87,64s-33.19,39-52.78,120.07-24.34,94.82-23.09,116.11c8,22,17.17,28.37,25.73,35,4.81,16.36,12.75,29.5,23.75,40.24,16.25,10,18.47,14.51,18.47,14.51s-3.76-3.4-8.58,7.26-7.43,18.3-4.62,28.37,10.22,35,9.9,40.9c-0.22,4-1.2,17.17-1.51,27h73c-0.52-8.9,1.07-23.12-1.55-27,8.2,6.17,16.16,14.1,21.11,14.51s26.42-8.86,32.33-13.85,16.75-2,26.39-2.64c11-3.06,26.08-10.61,28.37-11.21s30.75,0.25,33,0c-1.27,7.81,0,12.46-1.32,14.51s-4.46,7.58-4,9.9a34.91,34.91,0,0,0,9.28,15.83H764.75c2.94-2.65,4.86-5.25,4.91-7.26,0.18-6.26-.82-8-3.3-9.24-1.77-4-9.31-11.12-15.17-10.56s-35.35-7.21-46.18-8.58c-5.23-7.67-19.42-22.15-24.41-25.07-3.23-3.27-9-5.53-2.64-5.28s10.52-.26,13.19,0a58.24,58.24,0,0,0,2.64-17.15c0-6.06,6.53-31,9.24-34.3,6.56-.48,54.46,11.4,67.29,16.49s42.42,21.95,48.82,27.71,13,5.95,15.83,7.26c-3.13,3.41-3.47,5.17-3.3,9.9s1.79,16.21,4,20.45,1.9,7.74,4,7.92,2.08,2.49,3.3,4,5.24,2.76,7.26,2.64-0.26,1.46,0,3.3,8.32,4.59,9.9,4.62,1.89,3.34,5.94,4,3.3,0.78,8.58,0,12.12,1,15.83.66-0.9,3.12-3.3,8.58h39c-1.83-5.11-5.15-14.61-5.4-17.15-0.34-3.52-3-48.7-2.64-52.12s1.35-5.52,3.3-6.6,2-5.94,2-5.94l21.77-1.32,2,3.3s9.56,0.73,10.56.66c2.39,25.13,5.45,53,10.16,79.16H1167.4c-2.51-30.36-5.16-65.78-4.56-89.72,5-9.55,11.1,9.84,13.85,0,0.63-2.26.32-7,0-9.24,5-.14,9.55-0.93,18.47-1.32,0.19,3.18-.3,13.8,4.62,15.17C1205.49,720.73,1229.34,682.72,1215,674.9ZM790.77,214.43c-5.12,1.6-21.3,2.12-23.75,2.64,1.21-4.55,2.87-9.69,2.64-11.21,2.33,0,11.74.8,18.47,0.66s4.14-.33,10.56-0.66a94.93,94.93,0,0,1,21.11,1.32c6.47,1.25,17.47,5.72,17.81,7.26C833.9,214.54,809.86,213.77,790.77,214.43ZM631.13,574c-1.08,2.93-3,17.33-4.62,25.07-3.4-1-12.34-6.92-12.53-7.92s0.52-4.18,0-6.6c0.77-1,12.5-9.73,13.85-11.21a14.07,14.07,0,0,1,4-2.64A2.93,2.93,0,0,1,631.13,574Zm19.79-106.21c-14.93,2-25.89,5.91-36.28,8.58s-30.43,7.32-36.28,8.58-10-.75-17.81,2.64-11.21,5.28-11.21,5.28,21.73-50.07,23.75-62.67c-0.37-12.94,1.59-18.49,3.3-17.81,5.65,2.26,11.21,8.17,27,18.47s25.35,14.42,40.9,22.43,20.77,11.51,22.43,13.85C661.24,467.39,665.85,465.73,650.92,467.76ZM830.36,661a6.94,6.94,0,0,1-4,0s-4.06-.09-4-3.3-1.75-10.25,9.24-8.58C831.21,654.54,829.87,660.18,830.36,661Zm-6.6-12.53a28.32,28.32,0,0,0-5.94,7.92,3.93,3.93,0,0,0,.66,4.62s-10.86,0-17.81.66S788,664.53,783.52,665a137,137,0,0,1-17.81,0c-4.45-.29-19.6-12.06-29-15.83s-27.92-14-30.35-15.17c-1.26-5.38-3.17-47.78,15.83-114.79,1.22-21.41-.41-23.71-6.6-33-0.45-.68-0.85-1.25-1.22-1.74l-0.76-.24c-2.24-.73-2.92-4.72.76,0.24,4.16,1.26,20.65,5.24,56-2.22,21.85-1.85,34-3.9,37.6-4.62a44.76,44.76,0,0,0,13.85,4,27.85,27.85,0,0,0-2,17.15c1,4.06-2.05,19.93-1.32,22.43s-1.57,8,1.32,9.9c1.73,4.19-.41,4.81.66,13.19,2.62,38.91,9.08,81.27,13.19,100.27C830.81,645.4,826.37,645.84,823.76,648.51Zm96.32-35.62c2.49,6.09,3.52,18.27,4.62,25.73s1.86,9.61,3.3,10.56-7.94,1.11-13.19-1.32C916.5,644.05,918,616.1,920.07,612.89Zm33,90.38c-3.41-.18-9,1.63-9.24,4s-16.7,1.22-19.79,2a36,36,0,0,1-7.26-6.6c-2,1.21,1.43-20.41,2.64-22.43,6.78-.14,10.94-4.22,17.15-2S953.15,691.77,955,696,956.47,703.45,953.06,703.27ZM955,479c-6.91-1.13-17.81-2-17.81-2s-8.06,15.64-9.24,18.47c-2.88-2.29-3.09-5.27,0-11.87a62.86,62.86,0,0,0,5.28-17.81c1-6,.11-15,1.32-27,0.85-8.47,7.95-39.36,9.2-46.94,2,0,2.81-12.32,3.33-14.41,0.93-3.7,15,11,16.49,12.53C964.76,393.83,956,475,955,479Zm21.77-184.06c-0.22,2.39-5.68,50.32-10.56,54.76-3.18.71-3.06,0.3-9.9-7.92,0.53-5.33,12.4-55.09,14.51-67.29C971.92,280.66,977,292.53,976.81,294.92Zm12.53,145.79c-1.2-.2-6.2-5.15-6.6-6.6s0-31.55,1.32-31.67,0.18-.91,2.64,0,15.23,37.74,15.83,38.92C996.32,441.19,990.55,440.91,989.34,440.71Z"
        transform="translate(-317.58 -190.02)" />
      </clipPath>
    </g>
  </defs>
</svg>
<div class="myShape"></div>
<span class="fitting">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam scelerisque arcu sagittis, congue diam at, tempus odio. Fusce a arcu ultrices, fringilla ante ac, ornare neque. Vestibulum pharetra viverra lacinia. Cras rhoncus malesuada gravida. Nam nisl turpis, laoreet eu metus sollicitudin, laoreet sodales elit. Curabitur vestibulum ut velit malesuada sodales. Ut nec lacus pulvinar, ultrices libero sit amet, posuere purus. Pellentesque maximus odio et nisl imperdiet, quis aliquam urna condimentum. Curabitur vestibulum maximus turpis sed ornare. Maecenas gravida odio at finibus porta.
<br>
Vivamus vestibulum turpis a lacus ullamcorper tincidunt. Suspendisse elementum arcu et erat ultrices vestibulum. Mauris ornare sem tincidunt mi condimentum, at ultricies neque sodales. Vivamus dapibus ornare odio at pulvinar. Praesent sem ex, malesuada a suscipit sit amet, lobortis eget nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Mauris in urna convallis, malesuada velit vel, aliquam nibh. Fusce a ornare ante. Mauris et dapibus augue. Vivamus pulvinar diam ac lectus rutrum, lacinia elementum eros ornare. Vestibulum eget tempus urna, et finibus tellus. Proin ut felis ut magna efficitur vehicula. Maecenas eu euismod arcu. Vestibulum hendrerit urna sed felis sodales vestibulum.</span>

最终，我希望右侧的文本围绕mainSVG 中定义的形状的右侧外侧流动。为了实现这一点，您可以看到我试图让我的 div 元素myShape 使其shape-outside 属性成为mainSVG 中的形状。任何帮助将不胜感激！

【问题讨论】：

您知道#mainSVG 是 this-file #mainSVG 的简写，那么您的初始 CSS 是否与 SVG 位于同一文件中？
是的，CSS 在同一个 HTML 文件中，但不在同一个元素中（即不在 SVG 元素中）。在此处查看我的 CodePen：如何为“shape-outside”属性引用嵌入式 SVG？ codepen.io/mavaddat/pen/Myybzz
我稍微修改了 HTML，以便我的 SVG 中的主路径包含在 ID 为“mainPath”的 clipPath 元素中。我现在没有成功地引用它来定义外部形状。

标签： html css svg css-shapes

【解决方案1】：

url("<path>") 语法不适用于shape-outside 属性（尽管它适用于clip-path 属性）。本地资源链接是XML's XLink specification, Extended Links 的一个特性，在 SVG 1.1 中不完全支持，它只实现了 XML 的简单 XLink 规范。

xlink:type = "simple" 标识正在使用的 XLink 的类型。在 SVG 中 1.1，只有简单的链接可用。链接默认是简单链接，所以属性 xlink:type = "simple" 是可选的，可能是在简单的链接上省略。 (17.1.5 IRI reference attributes)

另请参阅随后关于可能的预期（未来）实施的讨论： https://twitter.com/mavaddat/status/707680114960519168

【讨论】：