2

https://jsfiddle.net/swoq9g3f/1/

xlink:hrefjavascript でa を変更した後、Internet Explorer (v11.0.9600.17728) で単純な SVG が正しく描画されないという問題が発生しています。

IE で SVG だけをレンダリングすると、2 つの同心円が得られます。JavaScript はxlink:href、<use>要素#def1の値を以前の値である に設定します。この後、IE は大きな円のみをレンダリングし、小さな円はその後ろに隠します。小さい円は svg ドキュメントの後半にあるため、常に大きい円の上にレンダリングする必要があります。への呼び出しもいくつか含めましforceRedraw()たが、問題を修正できません。

この問題は、Chrome または Firefox では発生しません。これは何が原因ですか？問題を回避する方法はありますか?

SVG:

<svg id="svg_element" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
  <defs>
    <svg id="def1" width="300" height="300">
      <g>
        <circle cx="150" cy="150" r="100" />
        <circle cx="150" cy="150" r="50" />
      </g>
    </svg>

    <svg id="def2">
      <use id="use_element" xlink:href="#def1" />
    </svg>
  </defs>

  <g fill="white" stroke="black" >
    <use xlink:href="#def2" />
  </g>
</svg>

Javascript:

document.getElementById("use_element").setAttributeNS('http://www.w3.org/1999/xlink','href','#def1')

document.getElementById("def1").forceRedraw()
document.getElementById("def2").forceRedraw()
document.getElementById("svg_element").forceRedraw()
4

2 に答える 2

2

これは IE の更新時に発生しますが、更新xlink:href="..."時にも発生しclip-path=url(...)ます。問題は、DOM が最新ではなく、手動で強制的に更新する必要があることです。

更新 (即時の同期リフローまたは再レイアウト) を強制するには、 のような要素プロパティを読み取ることができますoffsetTop。これにより、ブラウザーは値を取得する前に要素を再描画する必要がありoffsetTopます。

これは次の講演で言及されています: Faster HTML and CSS: Layout Engine Internals for Web Developers (at 37:10)

私はこの関数を使用し、svg を変更するたびにこれを呼び出します。

function repaintThisElement(element){
   var tmp = 0;
   if (navigator.appName == 'Microsoft Internet Explorer'){
      tmp = elementOnShow.parentNode.offsetTop  +  'px';
   }else{
      tmp = elementOnShow.offsetTop;
   }
}
于 2015-10-28T12:13:14.670 に答える
2

問題の回避策を見つけました。

https://jsfiddle.net/swoq9g3f/9/

で何かを変更しても、<defs>必ずしも完全な再描画が行われるとは限らないようです。この例では、SVG のトップ レベルで を変更する<use>と<g>、再描画が正しくトリガーされることがわかりました。

SVG:

<svg id="svg_element" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="400" height="400">
  <defs>
    <svg id="def1" width="300" height="300">
      <g>
        <circle cx="150" cy="150" r="100" />
        <circle cx="150" cy="150" r="50"/>
      </g>
    </svg>

    <svg id="def2">
      <use id="use_element" xlink:href="#def1" />
    </svg>
  </defs>

  <g fill="white" stroke="black">
    <use id="use_element_2" xlink:href="#def2" />
  </g>
</svg>

Javascript:

document.getElementById("use_element").setAttributeNS('http://www.w3.org/1999/xlink','href','#def1')

document.getElementById("use_element_2").setAttributeNS('http://www.w3.org/1999/xlink','href','#def2')
于 2015-05-11T14:29:28.410 に答える