Question

我可以以任意给定百分比“ 0％-100％”创建带行的svg，以便借助calc calc(100% - 25px)，在“百分比宽度”中不包括圆角边框（以像素为单位）< / p>

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="50">
<rect fill="lightblue" y="0" x="0" width="100%" height="50" rx="25" ry="25"></rect>
<g class="percentage">
    <line class="100pct" x1="calc(100% - 25px)" x2="calc(100% - 25px)" y1="0" y2="50" stroke="red" stroke-width="4"></line>
</g>
</svg>

但是问题是，是否可以为旧版浏览器创建不带calc的同一svg？

我可以使用transform和translation来考虑一个圆角，但是我不知道如何限制宽度/添加某种余量。

百分比变化，所以一个共享的翻译使我只能到达一半，这里红色的100％线超出范围：

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="50">
<rect fill="lightblue" y="0" x="0" width="100%" height="50" rx="25" ry="25"></rect>
<g class="percentage" transform="translate(25, 0)">
    <line class="0pct" x1="0%" x2="0%" y1="0" y2="50"  stroke="blue" stroke-width="4"></line>
    <line class="100pct" x1="100%" x2="100%" y1="0" y2="50" stroke="red" stroke-width="4"></line>
</g>
</svg>

Answer 1

真的有支持以上语法的浏览器吗？如果是，则甚至违反SVG2 spec：

将来的规范可能会将“ x1”，“ y1”，“ x2”和“ y2”属性转换为几何属性。当前，只能通过元素属性而不是CSS来指定它们。

（由于calc()是CSS函数，因此只能在CSS上下文中使用。）

在所有支持SVG的浏览器中将起作用的是将x / y值与转换结合在一起；无单位= px值进入转换属性，单位（百分比）进入x / y属性。

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="50">
    <rect fill="lightblue" y="0" x="0" width="100%" height="50" rx="25" ry="25"></rect>
    <g class="percentage" >
        <line class="0pct" x1="100%" x2="100%" y1="0" y2="50" transform="translate(-25, 0)" stroke="red" stroke-width="4"></line>
    </g>
</svg>

除了SVG 1.1 transform属性外，还有CSS transform属性及其2D函数，它们的实现相当公平（例如：IE和Edge <17）。他们必须使用单位标识符，并且应该还支持嵌套的calc()函数。我没有该组合的兼容性数据，但是caniuse.com中也没有提及错误报告。

当前行不通的是将CSS转换语法用作呈现属性（在这方面尚未实现CSS transform spec），因此您需要在style属性中使用它们。

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="50">
    <rect fill="lightblue" y="0" x="0" width="100%" height="50" rx="25" ry="25"></rect>
    <g class="percentage" stroke="red" stroke-width="4" >
        <line class="0pct" x1="0" x2="0" y1="0" y2="50"
              style="transform:translate(calc(0 * (100% - 50px) + 25px))" />
        <line class="50pct" x1="0" x2="0" y1="0" y2="50"
              style="transform:translate(calc(0.5 * (100% - 50px) + 25px))" />
        <line class="100pct" x1="0" x2="0" y1="0" y2="50"
              style="transform:translate(calc(1 * (100% - 50px) + 25px))" />
    </g>
</svg>

如您所见，位置值不再是百分比（像素乘以百分比does not work），而是分数的1。我希望对您有用。

带有百分比和像素值的自适应svg

1 个答案: