SVGテキストとtextLength属性のIE10＆11レンダリングの問題

AIファイルをSVGに変換してSVGファイルを作成しました。それらには四角形のテキスト要素があります。正しい高さと幅を示すようにテキストを取得するには、textLength属性が使用されます。 IE 10 & 11のテキスト要素と対話するとき、textLength属性を持たない場合のサイズにテキストがサイズ変更されます。これはIE 9やEdge、Chromeでは発生しません。SVGテキストとtextLength属性のIE10＆11レンダリングの問題

簡易例https://jsfiddle.net/Jeff672/zze9xroo/ IE 10または11のテキストにマウスを合わせると問題が表示されます。

Correct and incorrect text display

は完全なHTMLは、マイクロソフトからの応答が

<!DOCTYPE html> 
<html> 
<head> 
<style> 
    text:hover { cursor: pointer; } 
    </style> 
</head> 
<body> 
    <svg id="svgGraphic" xmlns="http://www.w3.org/2000/svg" width="600" 
     height="200" viewBox="0 0 600 200"> 
    <rect x="5" y="10" height="52" width="510" style="fill:aliceblue; 
      stroke:red;" /> 
    <text x="10" y="50" textLength="500" font-size="50" 
      style="font-family: Arial,san-serif; fill: #000000;" > 
      Testing Internet Explorer</text> 
    </svg> 
</body> 
</html>

出典

2016-04-18 JeffD

https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7256245/

こんにちはだったとフィードバックをご提供していただきありがとうございます。セキュリティ関連でない限り、IEの機能のバグはもう処理していません。その結果、このアイテムは修正されません。

問題の修正は、textLength属性を変換スケールに変換することでした。 scaleXプロパティが=実際のテキストの長さによってtextLength属性に値を分割

textLength属性なし実際のテキストの長さを取得する（下記MeasureStringするスタイリングを考慮しない）に考え出しました。

テキスト要素にtransform = "scale（scaleX）"を追加し、textLength属性を削除します。このCSSを追加する

public static System.Drawing.SizeF MeasureString(XElement element, bool ignoreTextLengthAttribute = false) 
{ 
     if (element == null || string.IsNullOrWhiteSpace(element.Value)) 
      return new System.Drawing.SizeF(); 

     // NOTE: presentation attributes have less weight that style 
     double fontSize = 12; 
     if (element.Attribute("font-size") != null) 
     { 
      double doubleOut = 0; 
      if (double.TryParse(element.Attribute("font-size").Value, out doubleOut)) 
       fontSize = doubleOut; 
     } 

     FormattedText ft = new FormattedText 
     (
      element.Value, 
      CultureInfo.CurrentCulture, 
      FlowDirection.LeftToRight, 
      new Typeface("Arial"), 
      fontSize, 
      Brushes.Black 
     ); 

     if (!ignoreTextLengthAttribute && element.Attribute("textLength") != null) 
      ft.MaxTextWidth = double.Parse(element.Attribute("textLength").Value); 



     return new System.Drawing.SizeF((float)ft.Width, (float)ft.Extent); 
}

出典

2016-08-12 18:59:41 JeffD

text { 
     cursor: default !important; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
}

IEで私のために働いた、私はあなたの例にしようと、それはまた、あなたのスタイルは、テキストの変化の大きさを停止していますが、テキスト要素との相互作用を停止した

出典

2016-12-19 22:39:16

を働きました。問題は、テキスト要素と対話する必要があることです。 jsfiddleを更新して、あなたのスタイルを組み込み、jsを使ってマウスのテキスト要素とやり取りします。これにより、テキストが再度展開されます。 – JeffD

私はあなたが何を意味するかを見ます。 currentColorプロパティ値を使用すると、IEで実際に動作することがわかりました。これはややこしい解決策だとわかっていますが、助けになるかもしれません。 https://jsfiddle.net/zze9xroo/59/ –

SVGテキストとtextLength属性のIE10＆11レンダリングの問題

答えて

関連する問題