如何爲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