SVGの形状をViewboxのスペースからソースのスペースに変換します。背景画像のサイズ

Question

私は一連のSVGドキュメントを用意しています。各文書は背景である<image>で構成されています。この背景に対して、<rect>,<polygon>、または<path>のいずれかの形状がレンダリングされます。形状は、ソースの尺度が0.24のファクタであるviewBox内にレンダリングされます。したがって、<image>には、scale(0.24)の値を持つtransform属性があります。今

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2881.44 209.28"> 
<title>14-23</title> 
<style type="text/css"><![CDATA[ 
    .shape { 
    fill: none; 
    pointer-events: visible; 
    } 
]]></style> 
<image width="12006" height="872" transform="scale(0.24)" xlink:href="14-23.png"/> 
<g id="_x31_000_East_Ohio_St_Year_Built:_196_x2A_-1968"> 
    <rect x="144.5" y="180.3" class="shape" width="44.3" height="15"/> 
</g> 
... 
</svg> 

、私は何をしたいの映像ソースの寸法を負担する新しい座標空間へのビューボックスの座標空間から、各形状の頂点を変換です。私の目標は、ソースイメージをソースイメージの寸法を持つdivのbackground-imageとしてレンダリングし、アスペクト比を維持しながらdivをスケールして、X軸とY軸のフィッティングされたスケールに対してシェイプを描画し、軸。

私の最初の考えは、1.76の係数でスケール変換を実行するか、または現在のスケールと変換後の画像スケールとの差にプラス1を加えたものです。しかし、これは私に望ましい出力を与えません。誰かが私が間違っている場所を明確にすることができますか？

Answer 1

要素を自分で計算せずに目標を達成し、単純に記述し、レンダラーが変換を実行できるようにすることができます。

Thwコンテナ<div>は、アスペクト比を失うことなく、可能な限り大きなサイズで内部に収まるように背景イメージを取得し、中央に配置されます。

<svg>要素の幅と高さをコンテナの100％と定義することで同じことができます。ビューボックスはバックグラウンド画像と同じ規則に従ってその空間に拡大されますが、わずかに異なる構文で書き留められます。 （preserveAspectRatioの相場値がデフォルトである、あなたはそれを残すことができます）：

<style type="text/css"> 
    #container { 
    background-image: url(14-23.png); 
    background-size: contain; 
    background-position: center; 
    } 
    .shape { 
    fill: none; 
    pointer-events: visible; 
    } 
</style> 
<div id="container"> 
    <svg xmlns="http://www.w3.org/2000/svg" 
     width="100%" height="100%" viewBox="0 0 2881.44 209.28" 
     preserveAspectRatio="xMidYMid meet"> 
    <g id="_x31_000_East_Ohio_St_Year_Built:_196_x2A_-1968"> 
     <rect x="144.5" y="180.3" class="shape" width="44.3" height="15"/> 
    </g> 
    ... 
    </svg> 
</div> 

を今も行われる必要があるすべてのコンテナのdivのサイズを記述することです。