带有百分比和像素值的响应式 svg

Question

我可以使用任何给定百分比“0%-100%”创建一个 svg，以便在 calc 的帮助下，圆角边框（以像素为单位）不包含在“百分比宽度”中calc(100% - 25px)

<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？

我可以使用变换和翻译来考虑一个圆角，但我不知道如何限制宽度/添加某种边距。

百分比变化，所以一个共享翻译只让我完成了一半，这里红色的 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 规范：

\n\n

\n

未来的规范可能会转换 \xe2\x80\x98x1\xe2\x80\x99、\xe2\x80\x98y1\xe2\x80\x99、\xe2\x80\x98x2\xe2\x80\x99 和 \xe2\x80 \x98y2\xe2\x80\x99 属性为几何属性。目前，它们只能通过元素属性指定，而不能通过 CSS 指定。

\n

\n\n

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

\n\n

在所有支持 SVG 的浏览器中，将 x/y 值与变换结合起来即可；无单位 = px 值转到变换属性，单位（百分比）转到 x/y 属性。

\n\n

\r\n

\r\n

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

\r\n

\r\n

\r\n

\n\n

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

\n\n

目前不起作用的是使用 CSS 转换语法作为表示属性（CSS 转换规范尚未在这方面实现），因此您需要在style属性中使用它们。

\n\n

\r\n

\r\n

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

\r\n

\r\n

\r\n

\n\n

正如您所看到的，位置值不再是百分比（将像素与百分比相乘不起作用），而是 1 的一小部分。我希望这对您有用。

\n