论坛 › 马黑黑教程专版 › svg : rect元素的rx和ry属性演示

马黑黑 发表于 2024-10-1 20:48

svg : rect元素的rx和ry属性演示

本帖最后由 马黑黑 于 2024-10-1 20:50 编辑 <br /><br /><svg width="420" height="420">
        <rect id="rect1" x="10" y="10" width="400" height="400" rx="0" ry="0" fill="none" stroke="green" stroke-width="4"/>
        <text id="text1" x="50%" y="50%" text-anchor="middle" dominant-baseline="middle" font-size="16">data</text>
</svg>
<p style="display:flex;align-items:center;gap:10px;">
        <label for="rngRx">rx : </label>
        <input id="rngRx" type="range" min="0" max="200" value="100"/>
        <output id="opRx"></output>
        <label for="rngRy">ry : </label>
        <input id="rngRy" type="range" min="0" max="200" value="100"/>
        <output id="opRy"></output>
</p>
<h2>svg初始代码</h2>
<div class="hE"><pre id="pre1"></pre></div>
<p>【说明】rect 的 rx 和 ry 属性分别定义了水平和垂直方向的半径尺寸，取值范围为 0 ~ rect宽高的一半。rx、ry两个属性只要有一个设置为 0 则另一个怎么设置均无法给 rect 绘制圆角。</p>

<script>
var ops = , rngs = ;
dataChanging = () => {
        rect1.setAttribute('rx', rngRx.value);
        rect1.setAttribute('ry', rngRy.value);
        text1.textContent = 'rx="' + rect1.getAttribute('rx') + '" ry="' + rect1.getAttribute('ry') + '"';
        ops.forEach((op,key) => op.value = rngs.value);
}
rngs.forEach((rng,key) => {
        rng.oninput = () => {
                dataChanging();
        };
});

dataChanging();

var svg1 = document.querySelector('svg');
var cstr = svg1.outerHTML;
pre1.textContent = cstr;

var sc = document.getElementById('hl_js');
if(sc === null) {
        sc = document.createElement('script');
        sc.chartset = 'utf-8';
        sc.id="hl_js";
        sc.src = 'https://638183.freep.cn/638183/yy/helight/helight.js';
        document.body.appendChild(sc);
}
</script>

起个网名好难 发表于 2024-10-1 20:56

和 border-radius 差不多的意思，可以这样理解吧。

红影 发表于 2024-10-1 22:13

当它们等于一半宽高时，就是圆了。

红影 发表于 2024-10-1 22:16

这个好，可以直接看出当其中一个值变化时，整体图形的变化情况，便于体会xy方向上的圆角变化。谢谢黑黑的详细讲解{:4_187:}

小辣椒 发表于 2024-10-1 22:26

这个可以直观的看见

马黑黑 发表于 2024-10-1 22:26

红影 发表于 2024-10-1 22:16
这个好，可以直接看出当其中一个值变化时，整体图形的变化情况，便于体会xy方向上的圆角变化。谢谢黑黑的详 ...

rect 的 rx、ry 和椭圆的 rx、ry 原理一致

马黑黑 发表于 2024-10-1 22:26

起个网名好难 发表于 2024-10-1 20:56
和 border-radius 差不多的意思，可以这样理解吧。

是的，只是取值范围的限制不同

马黑黑 发表于 2024-10-1 22:27

红影 发表于 2024-10-1 22:13
当它们等于一半宽高时，就是圆了。

没错

马黑黑 发表于 2024-10-1 22:28

小辣椒 发表于 2024-10-1 22:26
这个可以直观的看见

原理和 border-radius 差不离

起个网名好难 发表于 2024-10-1 23:10

本帖最后由 起个网名好难 于 2024-10-2 08:43 编辑

半径为rx、ry 的 1/4 椭圆与边线相接（切）

梦江南 发表于 2024-10-2 09:05

拉动rx="100" ry="100"就会变圆。

起个网名好难 发表于 2024-10-2 09:57

<svg width="420" height="420">
        <rect x="10" y="10" width="400" height="400" rx="100" ry="150" fill="none" stroke="green" stroke-width="4"></rect>
        <text font-size="1.5em">
          <tspan x='45%' y='200'>SVG</tspan>
          <tspan x='30%' y='240'>rx="100" ry="150"</tspan>
        </text>
</svg>

<div style="width:400px;height:400px;border:4px green solid;border-radius:100px / 150px;font-size:1.5em;text-align:center;">
    <span style="display:block;margin-top:45%">DIV + CSS</span>
    <span>border-radius: 100px / 150px;</span>
</div>

红影 发表于 2024-10-2 12:45

马黑黑 发表于 2024-10-1 22:26
rect 的 rx、ry 和椭圆的 rx、ry 原理一致

只设置一个可以么？看到今天的帖子里这设了rx是50%，结果也变圆了。

红影 发表于 2024-10-2 12:46

马黑黑 发表于 2024-10-1 22:28
原理和 border-radius 差不离

嗯嗯，这样一说倒是好理解了。

马黑黑 发表于 2024-10-2 13:01

红影 发表于 2024-10-2 12:45
只设置一个可以么？看到今天的帖子里这设了rx是50%，结果也变圆了。

ry不设置时，其值等于rx，和 border-radius 单值一个道理

红影 发表于 2024-10-2 13:53

马黑黑 发表于 2024-10-2 13:01
ry不设置时，其值等于rx，和 border-radius 单值一个道理

嗯嗯，知道了{:4_187:}

马黑黑 发表于 2024-10-2 13:57

红影 发表于 2024-10-2 13:53
嗯嗯，知道了

{:4_190:}

红影 发表于 2024-10-2 14:28

马黑黑 发表于 2024-10-2 13:57


border-radius 是写数字，一个两个到四个，比较好理解，这个直接写了rx所以迷惑了一下，现在知道了，缺省另一个就是数值相同{:4_187:}

马黑黑 发表于 2024-10-2 18:19

红影 发表于 2024-10-2 14:28
border-radius 是写数字，一个两个到四个，比较好理解，这个直接写了rx所以迷惑了一下，现在知道了，缺 ...

严格来说，svg的矩形圆角更好理解：一个管水平方向，一个管纵向方向。只不过，两个都设置时，其中任意一个不能为 0

红影 发表于 2024-10-2 22:25

马黑黑 发表于 2024-10-2 18:19
严格来说，svg的矩形圆角更好理解：一个管水平方向，一个管纵向方向。只不过，两个都设置时，其中任意一 ...

是的，你讲过的，其中一个为0 ，就都没效果了。

查看完整版本: svg : rect元素的rx和ry属性演示