如何翻轉SVG座標？

我有一個條形圖，條形圖將在SVG中創建的橫向中創建。我將如何翻轉SVG，使條形圖垂直？如何翻轉SVG座標？

我目前在我的CSS文件中有transform: 1, -1，但它不起作用。還有其他建議嗎？

2017-02-09 tralifa

下面的示例演示了您可能使用的一種策略。在SVG代碼的一個標記的圖形繪製的5倍：

（未轉化的原始）
- 旋轉90度
- 旋轉90度，
- 然後垂直翻轉（和翻譯回位置）
- 旋轉90度，
- 然後垂直翻轉（和翻譯回位置），
- 然後與所有的標籤再次垂直翻轉以恢復每個的方位（每個標籤單獨翻譯回位置）
- 旋轉90度，
- 然後垂直翻轉（和翻譯回位置），
- 然後與所有的標籤翻轉再次垂直於單獨還原每個的取向（與每個標籤轉換回位置），
- 然後旋轉180度

對於每個圖形外<g>元件是簡單地定位彼此相鄰的五個圖形和無關理解圖形翻轉。相反，內部元素具有對理解圖形翻轉至關重要的變換。

<svg width="600"> 
 
    <defs> 
 
    <g id="graph" fill="none" stroke="black"> 
 
     <polyline points="20,0 20,90 110,90"/> 
 
     <rect x="30" y="10" width="20" height="80"/> 
 
     <rect x="70" y="40" width="20" height="50"/> 
 
    </g> 
 
    <g id="X_label"> 
 
     <text transform="translate(24,110)">X values</text> 
 
    </g> 
 
    <g id="Y_label"> 
 
     <text transform="rotate(270) translate(-86,12)">Y values</text> 
 
    </g> 
 
    </defs> 
 
    <g transform="translate(0)"> 
 
    <g transform=""> 
 
     <use href="#graph"/> 
 
     <use href="#X_label"/> 
 
     <use href="#Y_label"/> 
 
    </g> 
 
    </g> 
 
    <g transform="translate(120)"> 
 
    <g transform="rotate(90,60,60)"> 
 
     <use href="#graph"/> 
 
     <use href="#X_label"/> 
 
     <use href="#Y_label"/> 
 
    </g> 
 
    </g> 
 
    <g transform="translate(240)"> 
 
    <g transform="rotate(90,60,60) scale(-1,1) translate(-120,0)"> 
 
     <use href="#graph"/> 
 
     <use href="#X_label"/> 
 
     <use href="#Y_label"/> 
 
    </g> 
 
    </g> 
 
    <g transform="translate(360)"> 
 
    <g transform="rotate(90,60,60) scale(-1,1) translate(-120,0)"> 
 
     <use href="#graph"/> 
 
     <use href="#X_label" transform="scale(-1,1) translate(-120,0)"/> 
 
     <use href="#Y_label" transform="scale(-1,1) translate(-15,0)"/> 
 
    </g> 
 
    </g> 
 
    <g transform="translate(480)"> 
 
    <g transform="rotate(90,60,60) scale(-1,1) translate(-120,0)"> 
 
     <use href="#graph"/> 
 
     <use href="#X_label" transform="scale(-1,1) translate(-120,0) rotate(180,55,104)"/> 
 
     <use href="#Y_label" transform="scale(-1,1) translate(-15,0)"/> 
 
    </g> 
 
    </g> 
 
</svg>

來源

2017-02-09 22:52:07

您可以使用transform和rotate()將SVG變成90度。

例：

transform: rotate(90);

注：既然你沒有提供任何代碼，使用rotate()後，您可能還需要使用translate()移動SVG回原位。

來源

2017-02-09 21:32:33

如何翻轉SVG座標？

回答

相關問題