Question

我有一个SVG元素，其宽度和高度已定义，如scale，填充了各种元素。

我希望有一种＆＃34; zoom＆＃34; feature，其中SVG的特定区域被放大以填充整个SVG元素。

我计划使用translate和scale(x)属性执行此操作，即将 summary 应用于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>

使用和高度属性缩放覆盖SVG

2 个答案: