SVGの高さ属性のオーバーライド

Question

さまざまな要素で埋められた<svg width="100px" height="100px"></svg>のような、定義された幅と高さを持つSVG要素があります。

SVGの特定の領域がズームインされてSVG要素全体が満たされる「ズーム」機能があります。

scaleとtranslateという属性を使用して、つまりscale(x)をSVG要素に適用して、目的の領域を表示したまま翻訳する必要があると計算することを計画しました。

これはSVGを100x100pxに保ち、この領域外の要素を単に隠すことが期待されます。しかし、これは起こりません。ディメンションが明示的に属性として定義されていても、SVG要素全体が代わりに大きくなります。

スケーリングとSVGディメンションの仕組みを誤解していますが、私がここで何をしようとしているのか、誰にも分かりますか？

Answer 1

div要素でsvgをワープし、overflow：hiddenを使用することができます。

<div style="width: 300px; height: 300px; overflow: hidden"> 
    <svg width="100" height="100" style="transform: scale(4);"> 
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
    </svg> 
</div> 

Answer 2

これはどういう意味ですか？そのような

function setViewBox(vbx){ 
 
    svg.setAttribute("viewBox",vbx) 
 
}

<svg viewBox="0 0 100 100" width="200px" height="200px" id="svg"> 
 
    <rect x="0" y="0" width="100" height="100" stroke="black" fill="white" onclick="setViewBox('0 0 100 100')"/> 
 
    <circle cx="25" cy="25" r="25" fill="red" onclick="setViewBox('0 0 50 50')"/> 
 
    <rect x="60" y="10" width="30" height="30" fill="green" onclick="setViewBox('50 0 50 50')"/> 
 
    <rect x="10" y="60" width="30" height="30" fill="blue" transform="rotate(45,25,75)" onclick="setViewBox('0 50 50 50')"/> 
 
    <path d="M50 100L75 50L100 100z" fill="yellow" onclick="setViewBox('50 50 50 50')"/> 
 
</svg>

以上？

var last=null 
 
function setTransform(evt,trs){ 
 
    reset() 
 
    svg.appendChild(evt.target) 
 
    evt.target.setAttribute("transform","scale(2 2) translate("+trs+")") 
 
    last=evt.target 
 
} 
 
function reset(){ 
 
    if(last) last.removeAttribute("transform") 
 
}

<svg viewBox="0 0 100 100" width="200px" height="200px" id="svg"> 
 
    <rect x="0" y="0" width="100" height="100" stroke="black" fill="white" onclick="reset()"/> 
 
    <circle cx="25" cy="25" r="25" fill="red" onclick="setTransform(event,'0 0')"/> 
 
    <rect x="60" y="10" width="30" height="30" fill="green" onclick="setTransform(event,'-50 0')"/> 
 
    <rect x="10" y="60" width="30" height="30" fill="blue" transform="rotate(45,25,75)" onclick="setTransform(event,'0 -50')"/> 
 
    <path d="M50 100L75 50L100 100z" fill="yellow" onclick="setTransform(event,'-50 -50')"/> 
 
</svg>