我正在嘗試在 svg 形狀中構建一個聯系表單。它是從 Corel Draw 匯出的一個非常復雜的形狀。但<foreignObject>根本不顯示。我正在使用 Chrome。
這是我的代碼
.str0 {stroke:#EBEBEB;stroke-width:15.4479}
.str2 {stroke:#ED174A;stroke-width:686.579}
.str1 {stroke:#ABD4EC;stroke-width:51.4929;stroke-dasharray:51.492915 154.478745}
.fil1 {fill:none}
.fil0 {fill:#EBECEC}
.fil3 {fill:#001F49}
.fil2 {fill:#8BC1FF}
.fil4 {fill:#FEFEFE;fill-rule:nonzero}
svg{
width:800px;
display: block;
margin:0 auto;
}<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" height="131.927mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
viewBox="0 0 35594 26745"
xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Layer_x0020_1">
<g class="inputy">
<circle class="fil0 str0" cx="17993" cy="13373" r="11000"/>
<foreignObject x="50" y="50" width="200" height="150">
<body xmlns="http://www.w3.org/1999/xhtml">
<form>
<input type="text"/>
<input type="text"/>
</form>
</body>
</foreignObject>
</g>
<circle class="fil1 str1" cx="17859" cy="13507" r="12018"/>
<circle class="fil1 str2" cx="17993" cy="13373" r="13029"/>
<path class="fil2" d="M11512 12715l-9970 -5756c-2056,3562 -2056,7950 0,11512l9970 -5756z"/>
<path class="fil4" d="M650 11499l342 0c75,0 130,18 167,53 37,35 56,86 56,152 0,67 -20,120 -61,158 -40,38 -102,57 -185,57l-113 0 0 246 -206 0 0 -666zm206 284l51 0c40,0 68,-7 84,-21 16,-14 24,-31 24,-53 0,-21 -7,-39 -21,-53 -14,-15 -40,-22 -79,-22l-59 0 0 149z"/>
<path id="1" class="fil4" d="M1329 11832c0,-109 30,-193 91,-254 61,-61 145,-91 253,-91 111,0 196,30 256,89 60,60 90,143 90,250 0,78 -13,141 -39,191 -26,50 -64,88 -114,116 -50,28 -111,42 -185,42 -75,0 -137,-12 -186,-36 -49,-24 -89,-62 -120,-114 -31,-52 -46,-116 -46,-194zm205 0c0,67 13,115 38,145 25,29 59,44 102,44 44,0 79,-14 103,-43 24,-29 36,-80 36,-155 0,-63 -13,-108 -38,-137 -25,-29 -60,-43 -103,-43 -42,0 -75,15 -100,44 -25,29 -38,78 -38,146z"/>
<path id="2" class="fil4" d="M2161 11499l342 0c75,0 130,18 167,53 37,35 56,86 56,152 0,67 -20,120 -61,158 -40,38 -102,57 -185,57l-113 0 0 246 -206 0 0 -666zm206 284l51 0c40,0 68,-7 84,-21 16,-14 24,-31 24,-53 0,-21 -7,-39 -21,-53 -14,-15 -40,-22 -79,-22l-59 0 0 149z"/>
<polygon id="3" class="fil4" points="2820,11499 3445,11499 3445,11663 3235,11663 3235,12164 3030,12164 3030,11663 2820,11663 "/>
<path id="4" class="fil4" d="M3980 12054l-233 0 -33 110 -210 0 251 -666 225 0 249 666 -215 0 -33 -110zm-44 -144l-73 -239 -73 239 146 0zm-77 -588l159 0 -147 136 -88 0 76 -136z"/>
<polygon id="5" class="fil4" points="4261,11499 4476,11499 4626,11978 4774,11499 4983,11499 4735,12164 4513,12164 "/>
<polygon id="6" class="fil4" points="5083,11499 5288,11499 5288,11750 5504,11499 5777,11499 5534,11749 5789,12164 5536,12164 5395,11891 5288,12002 5288,12164 5083,12164 "/>
<path id="7" class="fil4" d="M5831 11832c0,-109 30,-193 91,-254 61,-61 145,-91 253,-91 111,0 196,30 256,89 60,60 90,143 90,250 0,78 -13,141 -39,191 -26,50 -64,88 -114,116 -50,28 -111,42 -185,42 -75,0 -137,-12 -186,-36 -49,-24 -89,-62 -120,-114 -31,-52 -46,-116 -46,-194zm205 0c0,67 13,115 38,145 25,29 59,44 102,44 44,0 79,-14 103,-43 24,-29 36,-80 36,-155 0,-63 -13,-108 -38,-137 -25,-29 -60,-43 -103,-43 -42,0 -75,15 -100,44 -25,29 -38,78 -38,146z"/>
<polygon id="8" class="fil4" points="6560,11499 6774,11499 6924,11978 7072,11499 7281,11499 7034,12164 6811,12164 "/>
<path id="9" class="fil4" d="M7314 11499l228 0 135 224 134 -224 227 0 -258 387 0 279 -206 0 0 -279 -259 -387zm356 -176l159 0 -147 136 -88 0 76 -136z"/>
<polygon id="10" class="fil4" points="652,13203 1160,13203 1160,13346 858,13346 858,13462 1117,13462 1117,13597 858,13597 858,13869 652,13869 "/>
<path id="11" class="fil4" d="M1278 13536c0,-109 30,-193 91,-254 61,-61 145,-91 253,-91 111,0 196,30 256,89 60,60 90,143 90,250 0,78 -13,141 -39,191 -26,50 -64,88 -114,116 -50,28 -111,42 -185,42 -75,0 -137,-12 -186,-36 -49,-24 -89,-62 -120,-114 -31,-52 -46,-116 -46,-194zm205 0c0,67 13,115 38,145 25,29 59,44 102,44 44,0 79,-14 103,-43 24,-29 36,-80 36,-155 0,-63 -13,-108 -38,-137 -25,-29 -60,-43 -103,-43 -42,0 -75,15 -100,44 -25,29 -38,78 -38,146z"/>
<path id="12" class="fil4" d="M2114 13869l0 -666 343 0c64,0 112,5 146,16 34,11 61,31 81,61 21,30 31,66 31,108 0,37 -8,69 -24,96 -16,27 -37,49 -65,65 -18,11 -42,19 -72,26 24,8 42,16 53,24 7,5 18,17 33,35 14,18 24,32 29,41l100 192 -232 0 -110 -203c-14,-26 -26,-43 -37,-51 -15,-10 -32,-15 -51,-15l-18 0 0 270 -206 0zm206 -395l87 0c9,0 28,-3 55,-9 14,-3 25,-10 33,-21 9,-11 13,-24 13,-39 0,-22 -7,-38 -20,-50 -14,-12 -39,-17 -77,-17l-90 0 0 136z"/>
<polygon id="13" class="fil4" points="2865,13203 3136,13203 3239,13608 3343,13203 3613,13203 3613,13869 3445,13869 3445,13361 3315,13869 3163,13869 3033,13361 3033,13869 2865,13869 "/>
<path id="14" class="fil4" d="M4210 13203l205 0 0 397c0,39 -6,76 -18,111 -12,35 -31,66 -58,92 -26,26 -54,44 -82,55 -40,15 -88,22 -144,22 -32,0 -68,-2 -106,-7 -38,-5 -70,-13 -96,-27 -26,-13 -49,-33 -71,-57 -21,-25 -36,-50 -44,-77 -13,-42 -19,-80 -19,-112l0 -397 205 0 0 406c0,36 10,65 30,85 20,20 48,31 84,31 35,0 63,-10 83,-30 20,-20 30,-48 30,-85l0 -406z"/>
<polygon id="15" class="fil4" points="4584,13203 4789,13203 4789,13705 5111,13705 5111,13869 4584,13869 "/>
<path id="16" class="fil4" d="M5646 13759l-233 0 -33 110 -210 0 251 -666 225 0 249 666 -215 0 -33 -110zm-44 -144l-73 -239 -73 239 146 0zm-77 -588l159 0 -147 136 -88 0 76 -136z"/>
<path id="17" class="fil4" d="M5995 13869l0 -666 343 0c64,0 112,5 146,16 34,11 61,31 81,61 21,30 31,66 31,108 0,37 -8,69 -24,96 -16,27 -37,49 -65,65 -18,11 -42,19 -72,26 24,8 42,16 53,24 7,5 18,17 33,35 14,18 24,32 29,41l100 192 -232 0 -110 -203c-14,-26 -26,-43 -37,-51 -15,-10 -32,-15 -51,-15l-18 0 0 270 -206 0zm206 -395l87 0c9,0 28,-3 55,-9 14,-3 25,-10 33,-21 9,-11 13,-24 13,-39 0,-22 -7,-38 -20,-50 -14,-12 -39,-17 -77,-17l-90 0 0 136zm164 -314l-131 0 -101 -130 112 0 55 70 55 -70 113 0 -104 130z"/>
<g id="odeslat">
<path class="fil3" d="M24081 12715l9970 -5756c2056,3562 2056,7950 0,11512l-9970 -5756z"/>
<g data-text="odeslat">
<path class="fil4" d="M28693 12321c0,-117 33,-208 98,-273 65,-65 156,-98 273,-98 119,0 211,32 276,96 65,64 97,154 97,269 0,84 -14,152 -42,206 -28,54 -69,95 -122,125 -53,30 -120,45 -199,45 -81,0 -148,-13 -201,-39 -53,-26 -96,-67 -129,-122 -33,-56 -49,-125 -49,-209zm221 0c0,72 14,124 40,156 27,32 64,47 110,47 48,0 85,-16 111,-46 26,-31 39,-86 39,-167 0,-67 -14,-117 -41,-148 -27,-31 -64,-47 -111,-47 -45,0 -81,16 -108,47 -27,32 -41,84 -41,157z"/>
<path id="1" class="fil4" d="M29593 11962l329 0c65,0 117,9 157,26 40,18 73,43 99,76 26,33 45,71 57,115 12,44 18,90 18,139 0,77 -9,136 -26,178 -17,42 -42,78 -73,106 -31,29 -64,48 -100,57 -49,13 -93,20 -132,20l-329 0 0 -717zm221 162l0 391 54 0c46,0 79,-5 99,-15 20,-10 35,-28 46,-54 11,-26 17,-67 17,-124 0,-76 -12,-128 -37,-156 -25,-28 -66,-42 -124,-42l-55 0z"/>
<polygon id="2" class="fil4" points="30404,11962 30997,11962 30997,12115 30626,12115 30626,12230 30970,12230 30970,12376 30626,12376 30626,12517 31008,12517 31008,12679 30404,12679 "/>
<path id="3" class="fil4" d="M31124 12442l210 -13c5,34 14,60 28,78 23,29 55,43 98,43 32,0 56,-7 73,-22 17,-15 26,-32 26,-52 0,-19 -8,-35 -24,-50 -16,-15 -54,-28 -113,-42 -97,-22 -166,-51 -208,-87 -42,-36 -63,-82 -63,-138 0,-37 11,-71 32,-104 21,-33 53,-59 96,-77 43,-19 102,-28 176,-28 92,0 161,17 209,51 48,34 77,88 86,163l-208 12c-6,-33 -17,-56 -35,-71 -18,-15 -42,-22 -74,-22 -26,0 -45,6 -58,16 -13,11 -20,24 -20,40 0,11 5,22 16,31 10,10 35,18 74,26 97,21 166,42 208,63 42,21 72,48 91,79 19,32 29,67 29,106 0,46 -13,88 -38,127 -26,39 -61,68 -107,88 -46,20 -103,30 -172,30 -122,0 -206,-24 -253,-70 -47,-47 -73,-106 -80,-179z"/>
<polygon id="4" class="fil4" points="31921,11962 32142,11962 32142,12503 32488,12503 32488,12679 31921,12679 "/>
<path id="5" class="fil4" d="M33065 12561l-251 0 -36 118 -226 0 270 -717 242 0 269 717 -232 0 -36 -118zm-47 -155l-78 -258 -79 258 157 0z"/>
<polygon id="6" class="fil4" points="33319,11962 33993,11962 33993,12139 33766,12139 33766,12679 33545,12679 33545,12139 33319,12139 "/>
</g>
</g>
</g>
</svg>如您所見，帶有輸入的表單未顯示。我嘗試添加xmlns:xhtml="http://www.w3.org/1999/xhtml"到 svg。以 開頭的標簽xhtml:。xmlns="http://www.w3.org/1999/xhtml"直接添加到form. 但這些都沒有幫助。我不知道我還能嘗試什么。謝謝你的想法。
uj5u.com熱心網友回復：
這是一個尺度問題。
viewBox="0 0 35594 26745"
這些數字非常大。輸入在那里，但太小了，你看不到它們。它們隱藏在 svg 的左上角。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/399998.html
上一篇：將Flex專案置于底部