以下のコードを検討してください。私は2つのインラインsvgをそれぞれのテキストコンテンツに合わせることができますか？私。 "Teststring。Lorem" "foo"はもっと短くする必要があります。 2つの同一のsvgが必要ですが、コンテンツテキストは唯一の違いです。現在、静的な幅は50ピクセルです。インラインsvg：画像の幅をコンテンツに合わせる

私はこれをHTML + CSSで簡単に達成できると知っていますが、私の実際のシナリオでは、テキストの後ろにSMILアニメーションが必要です。これが最も簡単な方法です。私はすでに（もっと複雑な）選択肢を持っているので、私が望むものではありません。私はちょうどこれが可能かどうか、もしそうなら、知りたい。だから、「まったく動かすことはできません。何か違うことを試してみてください」というのは正しい答えでしょう。（私は期待していない何かが、。）以下は、これを行うための正しい方法ですが、それが動作するかどうか、私はよく分からない

<svg width="50" height="20" viewBox="0 0 50 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
\t <foreignObject x="0" y="0" width="50" height="20"> 
 
\t \t <body xmlns="http://www.w3.org/1999/xhtml"> 
 
\t \t \t Teststring. Lorem. 
 
\t \t </body> 
 
\t </foreignObject> 
 
\t <rect x="0" y="0" width="50" height="20" fill="rgba(0,0,0,.3)"></rect> 
 
</svg><br> 
 

 
<svg width="50" height="20" viewBox="0 0 50 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
\t <foreignObject x="0" y="0" width="50" height="20"> 
 
\t \t <body xmlns="http://www.w3.org/1999/xhtml"> 
 
\t \t \t foo 
 
\t \t </body> 
 
\t </foreignObject> 
 
\t <rect x="0" y="0" width="50" height="20" fill="rgba(0,0,0,.3)"></rect> 
 
</svg>

2016-12-20 Scindix

。

ソリューションの説明

SVG内のテキストをspanタグに包まれています。 onloadイベントでは、svgタグの幅はjavascriptで測定されたスパン要素の幅に設定されます。残念ながら、svgタグの個別のIDを設定し、それに応じてjavascriptコードの最初の行にid文字列を調整する必要があります。新しい幅

を設定

はまた、あなたは、SVGで、関連するすべての要素に新しい幅を設定する必要があります。あなたがたくさんの要素を持っていると少し醜いものになる可能性があります。可能なショートカットは、その変換属性が操作されるグループ要素です。これは、プロパティを保存しながら、グループのコンテンツを正しいサイズに拡大します。以下のような何か：

//javascript 
thisSvg.getElementsByClassName('group')[0].setAttribute(
    'transform', 'scale('+textWidth/50+')'); 

<!--svg--> 
<g class="group"> 
    <rect x="0" y="0" width="50" height="20" fill="rgba(0,0,0,.3)"></rect> 
    <rect x="0" y="0" width="25" height="20" fill="rgba(1,0,0,.3)"></rect> 
</g>

実際のソリューション

<svg id="custom-id-1" width="50" height="20" viewBox="0 0 50 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload=" 
 
    var thisSvg = document.getElementById('custom-id-1'); 
 
    var box = thisSvg.getElementsByClassName('text')[0].getBoundingClientRect(); 
 
    var textWidth = box.right-box.left; 
 
    thisSvg.setAttribute('viewBox', '0 0 '+textWidth+' 20'); 
 
    thisSvg.setAttribute('width', textWidth); 
 
    thisSvg.getElementsByClassName('foreign')[0].setAttribute('width', textWidth); 
 
    thisSvg.getElementsByClassName('rect')[0].setAttribute('width', textWidth); 
 
"> 
 
\t <foreignObject class="foreign" x="0" y="0" width="50" height="20"> 
 
\t \t <body xmlns="http://www.w3.org/1999/xhtml"> 
 
\t \t \t <span class="text" style="white-space:nowrap">Teststring. Lorem.</span> 
 
\t \t </body> 
 
\t </foreignObject> 
 
\t <rect class="rect" x="0" y="0" width="50" height="20" fill="rgba(0,0,0,.3)"></rect> 
 
</svg><br> 
 

 
<svg id="custom-id-2" width="50" height="20" viewBox="0 0 50 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload=" 
 
    var thisSvg = document.getElementById('custom-id-2'); 
 
    var box = thisSvg.getElementsByClassName('text')[0].getBoundingClientRect(); 
 
    var textWidth = box.right-box.left; 
 
    thisSvg.setAttribute('viewBox', '0 0 '+textWidth+' 20'); 
 
    thisSvg.setAttribute('width', textWidth); 
 
    thisSvg.getElementsByClassName('foreign')[0].setAttribute('width', textWidth); 
 
    thisSvg.getElementsByClassName('rect')[0].setAttribute('width', textWidth); 
 
"> 
 
\t <foreignObject class="foreign" x="0" y="0" width="50" height="20"> 
 
\t \t <body xmlns="http://www.w3.org/1999/xhtml"> 
 
\t \t \t <span class="text" style="white-space:nowrap">foo</span> 
 
\t \t </body> 
 
\t </foreignObject> 
 
\t <rect class="rect" x="0" y="0" width="50" height="20" fill="rgba(0,0,0,.3)"></rect> 
 
</svg>

出典

2016-12-21 01:59:28 Scindix

インラインsvg：画像の幅をコンテンツに合わせる

答えて

ソリューションの説明

実際のソリューション

関連する問題