可变宽度的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来更好地控制您的绘图...

编辑：

那么我需要问一个关于宽高比的问题。如果你取一个正方形（宽度=高度）并从 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）必须匹配最外面的viewBox的AR，但可以有不同的值。同样地，对于第二个内部SVG，但现在您正在处理总数的切片，即真正的正方形而不是矩形。您可以改变最外层SVG的宽度和高度，只要您保持相同的AR，内部的所有代码都不必更改 - 它将自动扩展：）

还要注意使用的不同比例和我用于坐标的不同值类型。因为我的第二个内部SVG viewBox将用户坐标设置为100 X 100,10％和10相同的事情......

你也可以设置preserveAspectRatio="none"或其他一些值来实现不同的效果，但对于图表我觉得排队很重要，所以我不会。

最后一点注意事项 - 您可以（在您的情况下应该）省略内部viewBox上的SVG。这样，图表的所有部分的比例都是一致的。我只是炫耀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。