Javascript viewBox没有';当宽度和;高度已设定
我的svg元素上有一个viewBox。如果浏览器屏幕变小了,我只是希望它能够按比例缩放svg。但是,如果我尝试设置svg符号的宽度和高度,它也会停止缩放Javascript viewBox没有';当宽度和;高度已设定,javascript,svg,d3.js,width,viewbox,Javascript,Svg,D3.js,Width,Viewbox,我的svg元素上有一个viewBox。如果浏览器屏幕变小了,我只是希望它能够按比例缩放svg。但是,如果我尝试设置svg符号的宽度和高度,它也会停止缩放 var svg = d3.select("#svgpath").append("svg:svg") .attr("viewBox", "0 0 1000 730") .attr("width", "900") .attr("height",
var svg = d3.select("#svgpath").append("svg:svg")
.attr("viewBox", "0 0 1000 730")
.attr("width", "900")
.attr("height", "650")
.attr("preserveAspectRatio", "xMinYMin meet")
.append("svg:g")
.attr("transform", "translate(500,430)");
有人能告诉我为什么没有宽度和高度,is的行为正常吗。我希望有一个固定的宽度和高度
感谢使用您指定的代码,渲染器将从(0,0-1000730)缩小SVG文档的部分,以适合矩形视口900x650。这是你的本意吗?从你的描述中不太清楚 要进行检查,请保存以下等效SVG并在浏览器中打开它
<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
width="900" height="650"
viewBox="0 0 1000 730"
preserveAspectRatio="xMinYMin meet">
<g>
<ellipse cx="500" cy="365" rx="500" ry="365"/>
</g>
</svg>
椭圆的宽度为900像素,高度为650像素。只要宽度和高度设置为这些值,它将保持该大小
但是,我怀疑您实际上想要做的是缩放SVG以适应“#svgpath”元素(我猜这是一个
(?))。如果这是您想要的,那么您应该改为将宽度和高度设置为“100%”。如果设置宽度和高度,它们是固定的,因此SVG不会缩放,因为它不会改变大小。你想在这里干什么?您希望内部图像缩放,但框架大小固定?您好,谢谢您的回复。我希望图像按如下示例进行缩放:。因为我需要宽度和高度,以便使用canvg将svg转换为图像。似乎如果svg上没有宽度或高度,canvg会说它太大。转换时是否尝试过临时设置宽度和高度?@ErikDahlström不,我没有。你有机会举个例子吗?但是,当我在IE9中使用viewBox时。它根本不起作用,这是一个已知的问题吗?