DIVをSVGコード

Question

StackOverflow 私は以前はHTMLで作業していましたが、今はfull-SVGプロジェクトで作業しています。私は単純なレイアウトを作成する必要があります：2つの長方形、ギャップを持つ列に配置され、それぞれのテキスト。私ができるのは、xとyという四角形とテキストを手動で配置することだけです。

質問：テキストは矩形の子で中央に揃えられたHTML（divと相対配置を使用）のように、どうすればよいですか？私はそれを作った方法です

：

<g> 
    <rect height="40" width="100"/> 
    <text alignment-baseline="baseline" x="30" y="33" font-family="Verdana" style="fill: #fff;" font-size="35">50</text> 
</g> 

は、事前に、ありがとうございます。

Answer 1

SVGはHTMLのようなフローレイアウトではありません。 SVG内で活字体レイアウト機能が必要な場合は、SVG foreignElementを使用してHTMLをSVGに埋め込むことができます。

<svg viewBox="..."> 
    <g> 
    <foreignObject x="10" y="20" height="20" width="80"> 
     <div xmlns="http://www.w3.org/1999/xhtml"><p>this</p></div> 
     <div xmlns="http://www.w3.org/1999/xhtml"><p>that</p></div> 
    </foreignObject> 
    </g> 
</svg> 

して、所望の効果を達成するためにCSSの山車、フレキシボックス、幅のパーセンテージまたはdivの上のどんなスタイルを使用します。

編集：あなたは、フィルタを使用することができる場合のforeignObjectが

Answer 2

ものの、IE11では動作しません、あなたはSVGで「DIV様」テキストボックスを描画することができます。

しかし、これはオリジナルのhtmlのdiv要素と比べると少し技術的ではありません。この「div-like」はテキストの折り返し、柔軟な枠線のスタイル、ボックスシャドウなどの便利な機能を持っていないからです。したがって、オリジナルのdiv要素をforeignObject要素と使用する必要があります。

サンプルコード：

/*color setting*/ 
 
.bgcolor{flood-color:yellow;} 
 
.bordercolor{flood-color:orange;} 
 

 
/*filter setting*/ 
 
.divLike{filter:url(#divLike);} 
 
.divLike>text{filter:url(#text);}

<!--define filters--> 
 
<svg width="0" height="0"> 
 
    <defs> 
 
     <!--create bounding box of text--> 
 
     <filter id="text" primitiveUnits="objectBoundingBox"> 
 
      <feFlood x="0" y="0" height="1" width="1" class="bgcolor"/> 
 
      <feMerge> 
 
       <feMergeNode/> 
 
       <feMergeNode in="SourceGraphic"/> 
 
      </feMerge> 
 
     </filter> 
 
     <!--wrap bounding box by feMorphology--> 
 
     <filter id="divLike" x="-1" y="-1" width="3" height="3"> 
 
      <!--create padding--> 
 
      <feFlood class="bgcolor"/> 
 
      <feComposite in2="SourceAlpha" operator="in"/> 
 
      <feMorphology operator="dilate" radius="10" result="padding"/> 
 
      <!--create border--> 
 
      <feFlood class="bordercolor"/> 
 
      <feComposite in2="padding" operator="in"/> 
 
      <feMorphology operator="dilate" radius="5" result="border"/> 
 
      <!--marge these graphics--> 
 
      <feMerge> 
 
       <feMergeNode in="border"/> 
 
       <feMergeNode in="padding"/> 
 
       <feMergeNode in="SourceGraphic"/> 
 
      </feMerge> 
 
     </filter> 
 
    </defs> 
 
</svg> 
 

 
<!--text layout--> 
 
<svg width="500px" height="200px">  
 
    <g class="divLike"> 
 
     <text x="50" y="50" font-size="30">This is <tspan font-weight="bold">div-like</tspan> effect.</text> 
 
    </g> 
 
</svg>