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

Question

我想使用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中的形状。 任何帮助，将不胜感激！

Answer 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