從SVG中更改0,0

我的HTML代碼中有一個SVG對象（<svg>），座標0,0位於元素的最左側和最頂端。我怎樣才能讓0,0成爲元素的最左邊和最底部，而不會對我的代碼做任何其他更改，只改變SVG元素的屬性/樣式？從SVG中更改0,0

CODE：

<svg viewBox="0 0 15000 15000">...[HERE COMES THE VECTOR CONTENT]...</svg>

來源

2016-09-18 Samul

發佈您的代碼，請 – LGSon

你可以改變，但如果你有任何的文字會出現倒掛。底線是，你可能最好堅持現有的座標系統。 –

環繞你的SVG的使用具有應用了transform一組內容。在Y方向上的變換應該是-1的比例（垂直翻轉）和翻轉以將翻轉的內容移回屏幕上。

但是請注意，正如羅伯特所說，文字和圖像等一些元素最終會顛倒過來。因此，如果您需要使用這些元素，則需要對這些元素進行適當的轉換，以便將它們反轉回正確的方式。

<svg viewBox="0 0 400 300"> 
 
    <g transform="translate(0,300) scale(1,-1)"> 
 

 
    <rect width="100%" height="100%" fill="#f8f8ff"/> 
 
    <line x1="0" y1="0" x2="100" y2="100" stroke="red" stroke-width="5"/> 
 
    
 
    </g> 
 
</svg>

來源

2016-09-18 20:30:31

您的代碼很棒，但元素的座標仍然保持不變。我正在使用JS訪問這些座標來更改圖形，而flippin沒有解決這個問題。如果能夠改變原點，這將會容易得多。無論如何，我會接受你的答案，因爲沒有人回答。非常感謝Paul – Samul

我不確定你的意思。現在，''內的任何座標都將好像原點位於左下方並且向上和向右增加。就像普通的笛卡爾座標一樣。 –

從SVG中更改0,0

回答

相關問題