我想使用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 {
/* */
}
&#13;
<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>
&#13;
最终,我希望右边的文字围绕mainSVG
中定义的形状右侧外侧流动。为实现此目的,您可以看到我尝试将我的div元素myShape
的{{1}}属性设置为shape-outside
中的形状。
任何帮助将不胜感激!
答案 0 :(得分: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