html – SVG图像互相 *** 纵_html-js-css

概述我得到了这个带有两个简单SVG图像的简单 HTML页面.一切都很好,直到我尝试打印页面(Chrome).当我打印页面时,我的第一张图表丢失了一些信息,我不明白为什么. 印刷前后：亲自尝试一下： <html> <body> <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="font-family:O 我得到了这个带有两个简单SVG图像的简单 HTML页面.一切都很好,直到我尝试打印页面(Chrome).当我打印页面时,我的第一张图表丢失了一些信息,我不明白为什么.

印刷前后：

亲自尝试一下：

<HTML>  <body>    <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  xmlns="http://www.w3.org/2000/svg" wIDth="600" height="400">      <desc>Created with Highstock 4.2.6</desc>      <defs>        <clipPath ID="highcharts-1">          <rect x="0" y="0" wIDth="523" height="330"></rect>        </clipPath>      </defs>      <rect x="0" y="0" wIDth="600" height="400" fill="#FFFFFF" ></rect>      <rect x="67" y="10" wIDth="523" height="330" fill="rgb(255,255,255)" fill-opacity="0.00"></rect>      <path fill="rgb(255,255)" fill-opacity="0.00" d="M 153.5 10 L 153.5 340 240.5 340 240.5 10"></path>      <path fill="rgb(255,255)" fill-opacity="0.00" d="M 328.5 10 L 328.5 340 415.5 340 415.5 10"></path>      <path fill="rgb(255,255)" fill-opacity="0.00" d="M 502.5 10 L 502.5 340 589.5 340 589.5 10"></path>      <path fill="rgb(255,255)" fill-opacity="0.00" d="M 67 340.5 L 590 340.5 590 258.5 67 258.5"></path>      <path fill="rgb(255,255)" fill-opacity="0.00" d="M 67 175.5 L 590 175.5 590 93.5 67 93.5"></path>      <g ></g>      <g >        <path fill="none" d="M 67 340.5 L 590 340.5" stroke="#DFDFDF" stroke-wIDth="1" opacity="1"></path>        <path fill="none" d="M 67 258.5 L 590 258.5" stroke="#DFDFDF" stroke-wIDth="1" opacity="1"></path>        <path fill="none" d="M 67 175.5 L 590 175.5" stroke="#DFDFDF" stroke-wIDth="1" opacity="1"></path>        <path fill="none" d="M 67 93.5 L 590 93.5" stroke="#DFDFDF" stroke-wIDth="1" opacity="1"></path>        <path fill="none" d="M 67 9.5 L 590 9.5" stroke="#DFDFDF" stroke-wIDth="1" opacity="1"></path>      </g>      <g >        <text x="328.5" text-anchor="mIDdle" transform="translate(0,0)"   y="383">          <tspan>Notenverteilung der Bauwerke</tspan>        </text>      </g>      <g >        <text x="26" text-anchor="mIDdle" transform="translate(0,0) rotate(270 26 175)"   y="175">          <tspan>Anzahl der Bauwerke</tspan>        </text>      </g>      <g >        <g  transform="translate(67,10) scale(1 1)"  clip-path="url(#highcharts-1)">          <rect x="17" y="265" wIDth="53" height="66" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="105" y="282" wIDth="52" height="49" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="192" y="42" wIDth="52" height="289" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="279" y="224" wIDth="52" height="107" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="366" y="323" wIDth="52" height="8" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="453" y="315" wIDth="53" height="16" fill="#3090F0" rx="0" ry="0"></rect>        </g>        <g  transform="translate(67,10) scale(1 1)" clip-path="none"></g>      </g>      <g >        <text x="110.58333333333334"  text-anchor="mIDdle" transform="translate(0,0)" y="362" opacity="1">          <tspan>1,0-1,4</tspan>        </text>        <text x="197.75"  text-anchor="mIDdle" transform="translate(0,5-1,9</tspan>        </text>        <text x="284.9166666666667"  text-anchor="mIDdle" transform="translate(0,0)" y="362" opacity="1">          <tspan>2,0-2,4</tspan>        </text>        <text x="372.08333333333337"  text-anchor="mIDdle" transform="translate(0,5-2,9</tspan>        </text>        <text x="459.25"  text-anchor="mIDdle" transform="translate(0,0)" y="362" opacity="1">          <tspan>3,0-3,4</tspan>        </text>        <text x="546.4166666666666"  text-anchor="mIDdle" transform="translate(0,5-4,0</tspan>        </text>      </g>      <g >        <text x="52"  text-anchor="end" transform="translate(0,0)" y="346" opacity="1">          <tspan>0</tspan>        </text>        <text x="52"  text-anchor="end" transform="translate(0,0)" y="264" opacity="1">          <tspan>10</tspan>        </text>        <text x="52"  text-anchor="end" transform="translate(0,0)" y="181" opacity="1">          <tspan>20</tspan>        </text>        <text x="52"  text-anchor="end" transform="translate(0,0)" y="99" opacity="1">          <tspan>30</tspan>        </text>        <text x="52"  text-anchor="end" transform="translate(0,0)" y="16" opacity="1">          <tspan>40</tspan>        </text>      </g>      <g   transform="translate(0,-9000000000)">        <path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0" stroke="black" stroke-opacity="0.049999999999999996" stroke-wIDth="5" transform="translate(1,1)"></path>        <path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0" stroke="black" stroke-opacity="0.09999999999999999" stroke-wIDth="3" transform="translate(1,1)"></path>        <path fill="none" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0" stroke="black" stroke-opacity="0.15" stroke-wIDth="1" transform="translate(1,1)"></path>        <path fill="#FFFFFF" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0"></path>      </g>      <text x="590" text-anchor="end"  y="395"></text>    </svg>    <svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  xmlns="http://www.w3.org/2000/svg" wIDth="600" height="400">      <desc>Created with Highstock 4.2.6</desc>      <defs>        <clipPath ID="highcharts-1">          <rect x="0" y="0" wIDth="516" height="312"></rect>        </clipPath>      </defs>      <rect x="0" y="0" wIDth="600" height="400" fill="#FFFFFF" ></rect>      <rect x="74" y="10" wIDth="516" height="312" fill="rgb(255,255)" fill-opacity="0.00" d="M 77.5 10 L 77.5 322 106.5 322 106.5 10"></path>      <path fill="rgb(255,255)" fill-opacity="0.00" d="M 135.5 10 L 135.5 322 164.5 322 164.5 10"></path>      <path fill="rgb(255,255)" fill-opacity="0.00" d="M 193.5 10 L 193.5 322 222.5 322 222.5 10"></path>      <path fill="rgb(255,255)" fill-opacity="0.00" d="M 251.5 10 L 251.5 322 280.5 322 280.5 10"></path>      <path fill="rgb(255,255)" fill-opacity="0.00" d="M 309.5 10 L 309.5 322 338.5 322 338.5 10"></path>      <path fill="rgb(255,255)" fill-opacity="0.00" d="M 367.5 10 L 367.5 322 396.5 322 396.5 10"></path>      <path fill="rgb(255,255)" fill-opacity="0.00" d="M 425.5 10 L 425.5 322 455.5 322 455.5 10"></path>      <path fill="rgb(255,255)" fill-opacity="0.00" d="M 484.5 10 L 484.5 322 513.5 322 513.5 10"></path>      <path fill="rgb(255,255)" fill-opacity="0.00" d="M 542.5 10 L 542.5 322 571.5 322 571.5 10"></path>      <path fill="rgb(255,255)" fill-opacity="0.00" d="M 74 322.5 L 590 322.5 590 260.5 74 260.5"></path>      <path fill="rgb(255,255)" fill-opacity="0.00" d="M 74 197.5 L 590 197.5 590 135.5 74 135.5"></path>      <path fill="rgb(255,255)" fill-opacity="0.00" d="M 74 72.5 L 590 72.5 590 10.5 74 10.5"></path>      <g ></g>      <g >        <path fill="none" d="M 74 322.5 L 590 322.5" stroke="#DFDFDF" stroke-wIDth="1" opacity="1"></path>        <path fill="none" d="M 74 260.5 L 590 260.5" stroke="#DFDFDF" stroke-wIDth="1" opacity="1"></path>        <path fill="none" d="M 74 197.5 L 590 197.5" stroke="#DFDFDF" stroke-wIDth="1" opacity="1"></path>        <path fill="none" d="M 74 135.5 L 590 135.5" stroke="#DFDFDF" stroke-wIDth="1" opacity="1"></path>        <path fill="none" d="M 74 72.5 L 590 72.5" stroke="#DFDFDF" stroke-wIDth="1" opacity="1"></path>        <path fill="none" d="M 74 9.5 L 590 9.5" stroke="#DFDFDF" stroke-wIDth="1" opacity="1"></path>      </g>      <g >        <text x="332" text-anchor="mIDdle" transform="translate(0,0)"   y="382.94112549695427">Jahre</text>      </g>      <g >        <text x="26" text-anchor="mIDdle" transform="translate(0,0) rotate(270 26 166)"   y="166">Kosten</text>      </g>      <g >        <g  transform="translate(74,10) scale(1 1)"  clip-path="url(#highcharts-1)">          <rect x="1" y="202" wIDth="5" height="111" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="9" y="132" wIDth="4" height="181" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="16" y="212" wIDth="4" height="101" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="23" y="24" wIDth="5" height="289" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="31" y="300" wIDth="4" height="13" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="38" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="45" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="52" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="60" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="67" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="74" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="81" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="89" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="96" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="103" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="110" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="118" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="125" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="132" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="140" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="147" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="154" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="161" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="169" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="176" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="183" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="190" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="198" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="205" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="212" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="219" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="227" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="234" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="241" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="249" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="256" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="263" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="270" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="278" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="285" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="292" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="299" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="307" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="314" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="321" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="328" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="336" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="343" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="350" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="358" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="365" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="372" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="379" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="387" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="394" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="401" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="408" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="416" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="423" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="430" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="438" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="445" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="452" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="459" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="467" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="474" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="481" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="488" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="496" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="503" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="510" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>        </g>        <g  transform="translate(74,10) scale(1 1)" clip-path="none"></g>      </g>      <g >        <text x="80.93363446243863"  text-anchor="end" transform="translate(0,0) rotate(-45 80.93363446243863 340)" y="340" opacity="1">          <tspan>2017</tspan>        </text>        <text x="168.14490206807244"  text-anchor="end" transform="translate(0,0) rotate(-45 168.14490206807244 340)" y="340" opacity="1">          <tspan>2029</tspan>        </text>        <text x="255.35616967370623"  text-anchor="end" transform="translate(0,0) rotate(-45 255.35616967370623 340)" y="340" opacity="1">          <tspan>2041</tspan>        </text>        <text x="342.5674372793401"  text-anchor="end" transform="translate(0,0) rotate(-45 342.5674372793401 340)" y="340" opacity="1">          <tspan>2053</tspan>        </text>        <text x="429.7787048849739"  text-anchor="end" transform="translate(0,0) rotate(-45 429.7787048849739 340)" y="340" opacity="1">          <tspan>2065</tspan>        </text>        <text x="516.9899724906077"  text-anchor="end" transform="translate(0,0) rotate(-45 516.9899724906077 340)" y="340" opacity="1">          <tspan>2077</tspan>        </text>        <text x="110.0040569976499"  text-anchor="end" transform="translate(0,0) rotate(-45 110.0040569976499 340)" y="340" opacity="1">          <tspan>2021</tspan>        </text>        <text x="139.07447953286115"  text-anchor="end" transform="translate(0,0) rotate(-45 139.07447953286115 340)" y="340" opacity="1">          <tspan>2025</tspan>        </text>        <text x="197.2153246032837"  text-anchor="end" transform="translate(0,0) rotate(-45 197.2153246032837 340)" y="340" opacity="1">          <tspan>2033</tspan>        </text>        <text x="226.28574713849497"  text-anchor="end" transform="translate(0,0) rotate(-45 226.28574713849497 340)" y="340" opacity="1">          <tspan>2037</tspan>        </text>        <text x="284.4265922089175"  text-anchor="end" transform="translate(0,0) rotate(-45 284.4265922089175 340)" y="340" opacity="1">          <tspan>2045</tspan>        </text>        <text x="313.49701474412876"  text-anchor="end" transform="translate(0,0) rotate(-45 313.49701474412876 340)" y="340" opacity="1">          <tspan>2049</tspan>        </text>        <text x="371.63785981455135"  text-anchor="end" transform="translate(0,0) rotate(-45 371.63785981455135 340)" y="340" opacity="1">          <tspan>2057</tspan>        </text>        <text x="400.7082823497626"  text-anchor="end" transform="translate(0,0) rotate(-45 400.7082823497626 340)" y="340" opacity="1">          <tspan>2061</tspan>        </text>        <text x="458.84912742018514"  text-anchor="end" transform="translate(0,0) rotate(-45 458.84912742018514 340)" y="340" opacity="1">          <tspan>2069</tspan>        </text>        <text x="487.9195499553964"  text-anchor="end" transform="translate(0,0) rotate(-45 487.9195499553964 340)" y="340" opacity="1">          <tspan>2073</tspan>        </text>        <text x="546.0603950258189"  text-anchor="end" transform="translate(0,0) rotate(-45 546.0603950258189 340)" y="340" opacity="1">          <tspan>2081</tspan>        </text>        <text x="575.1308175610302"  text-anchor="end" transform="translate(0,0) rotate(-45 575.1308175610302 340)" y="340" opacity="1">          <tspan>2085</tspan>        </text>      </g>      <g >        <text x="59"  text-anchor="end" transform="translate(0,0)" y="328" opacity="1">          <tspan>0</tspan>        </text>        <text x="59"  text-anchor="end" transform="translate(0,0)" y="266" opacity="1">          <tspan>10k</tspan>        </text>        <text x="59"  text-anchor="end" transform="translate(0,0)" y="203" opacity="1">          <tspan>20k</tspan>        </text>        <text x="59"  text-anchor="end" transform="translate(0,0)" y="141" opacity="1">          <tspan>30k</tspan>        </text>        <text x="59"  text-anchor="end" transform="translate(0,0)" y="78" opacity="1">          <tspan>40k</tspan>        </text>        <text x="59"  text-anchor="end" transform="translate(0,0)" y="16" opacity="1">          <tspan>50k</tspan>        </text>      </g>      <g   transform="translate(0,1)"></path>        <path fill="#FFFFFF" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0"></path>        <text x="8"  y="20"></text>      </g>      <text x="590" text-anchor="end"  y="395"></text>    </svg>  </body></HTML>

解决方法小学,亲爱的沃森.

您的问题是在HTML文档中复制ID的情况.目前你有2< clipPath ID =“highcharts-1”>在你的svg中使用相同的ID,我猜你会用某种工具生成2个图表. chipPaths后来用于剪切每个图表的内容：

<g  transform="translate(67,10) scale(1 1)"  clip-path="url(#highcharts-1)">

由于此SVG中有2个具有相同ID highcharts-1的clipPath,第二个clipPath会覆盖第一个,并且您的两个图表都将被第二个图表的内容区域剪裁.

因此,解决方案是更改clipPath的1的ID,并在适当的highcharts系列中使用其新ID.

<svg xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"  xmlns="http://www.w3.org/2000/svg" wIDth="600" height="400">      <desc>Created with Highstock 4.2.6</desc>      <defs>        <clipPath ID="highcharts-2">          <rect x="0" y="0" wIDth="516" height="312"></rect>        </clipPath>      </defs>      <rect x="0" y="0" wIDth="600" height="400" fill="#FFFFFF" ></rect>      <rect x="74" y="10" wIDth="516" height="312" fill="rgb(255,10) scale(1 1)"  clip-path="url(#highcharts-2)">          <rect x="1" y="202" wIDth="5" height="111" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="9" y="132" wIDth="4" height="181" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="16" y="212" wIDth="4" height="101" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="23" y="24" wIDth="5" height="289" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="31" y="300" wIDth="4" height="13" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="38" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="45" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="52" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="60" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="67" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="74" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="81" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="89" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="96" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="103" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="110" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="118" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="125" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="132" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="140" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="147" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="154" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="161" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="169" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="176" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="183" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="190" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="198" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="205" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="212" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="219" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="227" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="234" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="241" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="249" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="256" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="263" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="270" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="278" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="285" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="292" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="299" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="307" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="314" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="321" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="328" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="336" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="343" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="350" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="358" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="365" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="372" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="379" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="387" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="394" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="401" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="408" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="416" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="423" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="430" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="438" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="445" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="452" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="459" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="467" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="474" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="481" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="488" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="496" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="503" y="313" wIDth="4" height="0" fill="#3090F0" rx="0" ry="0"></rect>          <rect x="510" y="313" wIDth="5" height="0" fill="#3090F0" rx="0" ry="0"></rect>        </g>        <g  transform="translate(74,1)"></path>        <path fill="#FFFFFF" d="M 5 0 L 11 0 C 16 0 16 0 16 5 L 16 11 C 16 16 16 16 11 16 L 5 16 C 0 16 0 16 0 11 L 0 5 C 0 0 0 0 5 0"></path>        <text x="8"  y="20"></text>      </g>      <text x="590" text-anchor="end"  y="395"></text>    </svg>

对于无法在Chrome上重现错误的用户,请尝试缩小页面然后将其缩小.它强制浏览器再次渲染(在定义第二个clipPath之后)并模拟OP所具有的问题.

总结

以上是内存溢出为你收集整理的html – SVG图像互相 *** 纵全部内容，希望文章能够帮你解决html – SVG图像互相 *** 纵所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1128241.html