SVG图形具有可变宽度

Question

我试图创建具有一个固定的宽度，以左边为X轴标签，然后在可变宽度的SVG图形，以填充剩余的空间，实际的图形结果。下面的图片显示了我正在努力实现的目标。到目前为止，我一直无法解决如何创建固定宽度和可变宽度区域。

任何与此有关的帮助将不胜感激！

非常感谢。

Answer 1

我就窝里面你的主，像这样一对夫妇SVG元素：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500px" height="500px" > 

    <svg width="100"> 
     <rect x="0" y="0" width="100%" height="100%" fill="red" /> 
    </svg> 

    <svg x="100" > 
     <rect x="0" y="0" width="100%" height="100%" fill="blue" opacity="0.5"/> 
    </svg> 

</svg> 

注意我所做的蓝色SVG元素半透明的，所以你可以看到，没有任何SVG红色的是它背后。

我也建议使用viewBox让您对您的绘画更多的控制......

编辑：

OK，然后我要问你一个关于纵横比的问题。如果你取一个正方形（宽度=高度）并从ONE一边砍掉一个固定的部分，你不再有一个正方形，你必须考虑对你的图表意味着什么。

我相信这SVG将展示或多或少你想要什么：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
width="600px" height="500px" viewBox="0 0 1200 1000"> 

<svg width="200"> 
    <rect x="0" y="0" width="100%" height="100%" fill="red" opacity="0.5"/> 
</svg> 

<svg x="200" width="1000" height="1000" viewBox="0 0 100 100"> 
    <rect x="0" y="0" width="100%" height="100%" fill="blue" opacity="0.5"/> 
    <rect x="80%" y="10%" width="10%" height="50%" fill="green"/> 
    <rect x="10" y="10" width="70" height="40" fill="gray"/> 
</svg> 

注意的最SVG的纵横比（AR）的尺寸MUST比赛中最viewBox“但是可以有不同的值。对于第二个SVG也是如此，但现在你正在处理的是一个真正的正方形而不是矩形的总片。您可以改变最外面的宽度和高度SVG，只要您保持相同的AR，内部的所有代码都不必更改 - 它将全部按比例自动调整:)

还要注意不同尺度使用和我用于坐标的不同值类型。因为我的第二内SVG的viewBox设置用户坐标为100×100，10％和10量同样的事情...

你也可以设置preserveAspectRatio="none"或其他一些价值达到不同的效果，但对于一个图我有点认为排列起来很重要，所以我不会。

最后一个注意事项 - 您可以（并且在您的情况下应该）省略内部SVG上的viewBox。这样，图表的所有部分的比例都是一致的。我只是带的viewBox :)

它只是发生在我身上，你可能更喜欢矩形为正方形所以这里断电是一个代码示例：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
width="800px" height="400px" viewBox="0 0 1600 800" > 

<svg width="200"> 
    <rect x="0" y="0" width="100%" height="100%" fill="red" opacity="0.5"/> 
</svg> 

<svg x="200" width="1400" height="800" viewBox="0 0 175 100" > 
    <rect x="0" y="0" width="100%" height="100%" fill="blue" opacity="0.5"/> 
    <rect x="80%" y="10%" width="10%" height="50%" fill="green"/> 
    <rect x="10" y="10" width="70" height="40" fill="gray"/> 
</svg> 

注意内部SVG的宽度设置为175，以保持1400/800的高宽比。