在SVG中為所有東西切換X和Y軸？

我正在用SVG創建一個條形圖，默認條形圖是垂直的。但在某些情況下，如果條形圖是水平的，看起來會更好，比如只有2個條形圖的時候。

我怎樣才能重復使用相同的SVG代碼，只是切換X和Y軸來實作？實際上不僅僅是X和Y，還有像矩形的高度和寬度這樣的東西。

這可能嗎？我希望能避免寫兩次非常相似的代碼。

舉個例子。我分別構建了兩個圖表，理想情況下，第二個圖表應該通過重復使用第一個圖表的代碼來生成。

<style>/span>
  svg { height: 20px; width: 100px; border: 1px solid #ccc; }
</style>>

<svg> 
  < rect x="5%"/span> y="60%"/span> width="40%" height="40%" fill="black"/> 
  < rect x="55%"/span> y="40%" width="40%" height="60%" fill="black"/> 
</svg> 

<svg>/span>
  < rect y="5%"/span> x="0%"/span> 高度="40%" 寬度="40%" 填充="黑色"/> 
  < rect y="55%"/span> x="0%" 高度="40%" 寬度="60%" 填充="black"/> 
</svg> 

uj5u.com熱心網友回復：

也許可以這樣：

function cloneWithTransformedAttributes（obj1, mapping） {
  //回傳obj1的副本，其子節點屬性根據映射進行了轉換。
  const obj2 = obj1.cloneNode(true)。
  [...obj1.children].forEach((child, idx)=> /span>{
    Object.keys(mapping).forEach((attribute) => {
      const replaceVal = mapping[attributee].default ?
            mapping[attributee].default :
            child.getAttribute(mapping[attribute])。
        obj2.children[idx].setAttribute（attribute, replacementVal）。
    })
  })
  return obj2。
}

mapping = {
x: {
  default: 0.
},
y: "x",
width: "height",
height: "width", height.
}

const verticalSvg = document. getElementsByTagName("svg") [0]。
const horizontalSvg = cloneWithTransformedAttributes（verticalSvg, mapping）。

const graphs = document.getElementById("graphs"/span>) 。
graphs.appendChild(horizontalSvg); 

<style>/span>
  svg { height: 20px; width: 100px; border: 1px solid #ccc; }
</style>>

<div id="graphs"/span>>
  <svg>/span>
    < rect x="5%"/span> y="60%"/span> width="40%" height="40%" fill="black"/> 
    < rect x="55%"/span> y="40%" width="40%" height="60%" fill="black"/> 
  </svg> 
</div>/span>

編輯：你也可以用svg變換來做，但是你需要把SVG的內部放在一個組里面<g></g>。

const verticalSvg = document. getElementsByTagName("svg") [0]。
const svgStyle = window.getComputedStyle(verticalSvg, null) 。

const width = parseInt(svgStyle.getPropertyValue)。
const height = parseInt(svgStyle.getPropertyValue);
const whRatio = width / height;
const transform = `rotate(90) scale(${1 / whRatio} ${whRatio}) translate(0 -${height})`


const horizontalSvg = verticalSvg.cloneNode(true)。
horizontalSvg.children[0].setAttribute("transform"/span>, transform)。

const graphs = document.getElementById("graphs") 。
graphs.appendChild(horizontalSvg); 

<style>/span>
  svg { height: 20px; width: 100px; border: 1px solid #ccc; overflow: visible}。
</style>>

<div id="graphs"/span>>
  <svg>/span>
    <g>/span>
    < rect x="5%"/span> y="60%"/span> width="40%" height="40%" fill="black"/> 
    < rect x="55%"/span> y="40%" width="40%" height="60%" fill="black"/> 
    </g> 
  </svg>/span>
  <svg>/span>
    <!--手動計算和應用的變換-->
    <g transform="rotate(90)
                比例(0.20 5)
                  平移(0 -20)
                  ">
    < rect x="5%"/span> y="60%"/span> width="40%" height="40%" fill="black"/> 
    < rect x="55%"/span> y="40%" width="40%" height="60%" fill="black"/> 
    </g> 
  </svg>/span>
<!--JS生成的SVG將被插入這里-->
</div>/span>

在你的案例中，你需要將變換應用于容納SVG內容的組。 如果你將變換應用到SVG本身，它也將根據縮放變換來縮放邊框。

vector-effect="non-scaling-stroke"不能應用于SVG的邊框，它不是SVG本身的一部分。但是如果你在SVG中使用了帶有 "stroke "屬性的元素，那么你可能也想對它們應用vector-effect="non-scaling-stroke"屬性。

標籤：

上一篇：如何改變svg圖示的筆畫寬度？

下一篇：計算SVG圓中的虛線進度路徑