我試圖將我的 SVG 縮小 0.5 寬度，然后從正坐標到負坐標畫一條線，但它似乎只呈現到 x:0 和 y:0。
SVG.js 不支持負坐標繪圖，還是我在這里做錯了什么？
我的代碼：
const designerDiv = document.getElementById('designerDiv')
var draw = SVG().addTo(designerDiv).attr({width: '100%', height: '100%'})
draw.rect(100, 100).attr({ fill: '#f06' })
draw.scale(0.5, 0.5, 0, 0)
draw.line(-100, -100, 100, 100).stroke({ width: 3, color: '#000' })
draw.line(-100, 100, 100, -100).stroke({ width: 3, color: '#000' })
我的結果：
uj5u.com熱心網友回復：
在 SVG 中，允許在 viewBox 之外繪制，但不會顯示。viewBox 的檔案可以在這里找到：https ://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/viewBox
我相信您正在尋找的是：
const designerDiv = document.getElementById('designerDiv')
var draw = SVG().addTo(designerDiv).attr({width: '100%', height: '100%'})
draw.rect(100, 100).attr({ fill: '#f06' }).move(100,100)
draw.scale(0.5, 0.5, 0, 0)
draw.line(0, 0, 300, 300).stroke({ width: 3, color: '#000' })
draw.line(300, 0, 0, 300).stroke({ width: 3, color: '#000' })<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/[email protected]/dist/svg.min.js"></script>
<div id="designerDiv" style="width: 300px; height: 300px;"></div>但是如果你想使用負坐標，你也可以只調整 viewBox。
const designerDiv = document.getElementById('designerDiv')
var draw = SVG().addTo(designerDiv).attr({width: '100%', height: '100%'}).viewbox(-100, -100, 300, 300)
draw.rect(100, 100).attr({ fill: '#f06' }).move(-50,-50)
draw.scale(0.5, 0.5, 0, 0)
draw.line(-100, -100, 100, 100).stroke({ width: 3, color: '#000' })
draw.line(-100, 100, 100, -100).stroke({ width: 3, color: '#000' })<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/[email protected]/dist/svg.min.js"></script>
<div id="designerDiv" style="width: 300px; height: 300px;"></div>uj5u.com熱心網友回復：
您需要設定 svg 的值viewBox以覆寫繪圖區域。這里我展示了真正的 SVG 代碼。
viewBox是svg元素的屬性。您需要使用 svg.js 在您的實作中正確定義它。
<p>1 Circles: center:(0,0), radius:50<tspan>; Viewport, Top-Left:(0,0); width-height:(150,100)</tspan></p>
<svg width="150" height="100" viewBox="0 0 150 100">
<ellipse cx="0" cy="0" rx="50" ry="50"></ellipse>
</svg>
<p>2 Circles: center:(0,0), radius:50<tspan>; Viewport, Top-Left:(-75,-50); width-height:(150,100)</tspan></p>
<svg width="150" height="100" viewBox="-75 -50 150 100">
<ellipse cx="0" cy="0" rx="50" ry="50"></ellipse>
</svg>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/524374.html