從中心縮放SVG

我有一個svg作爲背景圖像在CSS中，我想翻轉它。（scale(-1, 1)）從中心縮放SVG

當我嘗試正常轉換時，它不會關於中心，看起來很奇怪。

有沒有辦法在中心周圍翻轉整個SVG，沒有JS？

下面是使用HTML演示，而不是CSS背景圖片： https://codepen.io/anon/pen/bRVqwz

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z'/></svg><br /> 
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' transform="scale(-1, 1)"/></svg> 


svg { 
    width: 50px; 
    height: 50px; 
}

來源

2017-06-07 Amit

標題有誤導之嫌。你正在尋找的是變換旋轉。添加了一個答案 – karthick

第一，瞭解如何翻轉SVG，你需要了解viewBox件作品（根據Mozilla的MDN）：

viewBox屬性的值是最小的x，最小Y，寬度和高度，由空格和/或逗號，它們指定分隔的四個數字的列表用戶空間中的矩形應該映射到由給定元素建立的視口邊界，並考慮屬性preserveAspectRatio。

所以，如果你想翻轉你的svg，首先你需要transform: scaleX(-1)。然後，您需要將您的[width]的負數傳遞給[min-x]。

例如：

原始SVG：viewBox='0 0 12 20'

翻轉SVG：viewBox='-12 0 12 20'

來源

2017-06-07 23:17:48

你可以嘗試變換x和y transform="rotate(180 5 10)"

<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 20'><path d='M2,20l-2-2l8-8L0,2l2-2l10,10L2,20z' transform="rotate(180 5 10)"/></svg>

文檔旋轉 https://www.w3.org/TR/SVG/coords.html#TransformAttribute

來源

2017-06-07 23:02:40 karthick

旋轉可能適用於此圖標，但不適用於每個人。 – Amit

:-)學習新東西 – karthick

從中心縮放SVG

回答

相關問題