How can I reference an embedded SVG path for a div "shape-outside" attribute?

Question

I would like to use the url("<path>") syntax to refer the shape-outside attribute to my embedded SVG, but I don't know how. Here's a setup I've tried:

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>

Ultimately, I would like the text on the right to flow around the outside of the right hand side of the shape defined in mainSVG. To achieve this, you can see that I'm trying to have my div element myShape have its shape-outside attribute be the shape in mainSVG. Any help would be appreciated!

Answer 1

The url("<path>") syntax is not available for the shape-outside attribute (although it is available for the clip-path attribute). Local resource linking is a feature of XML's XLink specification, Extended Links, not fully supported in SVG 1.1, which only implements XML's simple XLink specification.

xlink:type = "simple" Identifies the type of XLink being used. In SVG 1.1, only simple links are available. Links are simple links by default, so the attribute xlink:type = "simple" is optional and may be omitted on simple links. (17.1.5 IRI reference attributes)

See also the ensuing discussion on possible anticipated (future) implementation: https://twitter.com/mavaddat/status/707680114960519168