svgdr教程·set、sets 和 style
<style>.art p { margin: 12px 0; font: normal 18px/24px sans-serif; }
.art mark { padding: 2px 6px; background: lightblue; }
.art svg { outline: 1px solid silver; }
.tRed { color: red; }
</style>
<div class="art">
<h2>set、sets 和 style</h2>
<p><span class="tRed">set()</span>、<span class="tRed">sets()</span> 和 <span class="tRed">style()</span> 其实也是补充形式的指令，它们的存在主要是为了帮助主要绘制指令实现更灵活的属性补充。</p>
<p><storng>一、set</strong></p>
<p>指令：<mark>set()</p>
<p>参数：<mark>name, val</mark></p>
<p>语法：<mark>set(name, val)</mark></p>
<p>参数说明：</p>
<blockquote>
① name - 必须，字符型，指属性名，例如 'text-anchor'<br>
② val - 必须，字符型，属性值，例如，针对 'text-anchor' 属性：'start' | 'middle' | 'end'<br>
* set() 只能设置一个属性，例：set('text-anchor', 'middle')
</blockquote>
<p><strong>二、sets</strong></p>
<p>指令：<mark>sets()</mark></p>
<p>参数：<mark>option</mark></p>
<p>语法：<mark>sets(option)</mark></p>
<p>参数说明：</p>
<blockquote>
① option - 一个或一组有花括号里的JS键值对，用以描述所添加的SVG属性和属性值<br>
* 健名有短横线连接的，需要用引号，没有的不用引号；键值为纯数值的可以不用引号，字符型的必须用引号
</blockquote>
<p><strong>三、style</strong></p>
<p>指令：<mark>style()</mark></p>
<p>参数：<mark>val</mark></p>
<p>语法：<mark>style(val)</mark></p>
<p>参数说明：</p>
<blockquote>
① val - 一个或一组有引号包裹起来的CSS键值对，用以描述所添加的CSS属性或CSS支持的SVG属性和对应属性值<br>
* val 参数整体需要引号包裹，支持反引号<mark>`...`</mark>、小角单引号<mark>'...'</mark>和小角双引号<mark>"..."</mark>
</blockquote>
<p>下面以绘制文本为例，演示如何使用 set()、sets() 和 style() 指令：</p>
<div id="div1"><pre id="pre1">
//单一参数绘制文本 ：文本将不会显示，因为x、y默认为0，通过set()设置垂直悬挂对齐，文本可见
dr.text('Hello SVG').set('dominant-baseline', 'hanging');
//定位绘制文本 ：x设置为100，但由于用 sets() 指令设置了水平方向 middle 对齐，文本有一半跑到了x的左边
dr1.text('Hello SVG',100,50).sets({
'font-size': 30,
fill: 'blue',
'text-anchor': 'middle',
});
//上述第二种画法的一种方式 ：style() 指令，纯CSS写法，支持部分SVG属性
dr.text('Hello SVG',100,100).style(`
font-size: 30px;
fill: blue;
text-anchor: middle;
dominant-baseline: middle;
`);
</pre></div>
<svg id="svg1" width="760" height="140"></svg>
<p>上述效果的SVG代码：</p>
<div id="div2"><pre id="pre2"></pre></div>
<p>这里特别提醒，注意分清 <span class="tRed">sets()</span> 指令和 <span class="tRed">style()</span> 指令组织参数的区别，因为二者所使用的参数类型不同。<span class="tRed">sets()</span> 指令使用的参数是JS Object对象，用花括号将多组键值对（健名: 键值）组织起来，各键值对之间用小角逗号隔开，健名有短横线的需要使用小角引号包裹起来，键值为字符型的一样需要引号；<span class="tRed">style()</span> 指令使用字符型参数，整体需要引号包裹，各属性则按CSS的书写方式组织各键值对，键值对之间用小角分号隔开，健名、键值都不需要引号，同时注意，① 若需分行写，包裹整体CSS整体参数值的引号需要用反引号，不分行的反引号、小角单或双引号都行，② 纯CSS属性的，如 font-size 属性，其值若需要单位的得有单位（如 px），CSS所支持的SVG属性的，如 cx，则不要单位。</p>
<p><a href="/forum.php?mod=viewthread&tid=79137&extra=page%3D1" targete="_blank">返回目录</a></p>
<!--p><a href="/art/bshow.php?st=7&sd=7&art=mahei_1730435960" targete="_blank">返回目录</a></p-->
</div>
<script type="module">
import hl from 'https://638183.freep.cn/638183/web/mod/helight.js';
import draw from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = draw.dr('svg1');
dr.text('Hello SVG').set('dominant-baseline', 'hanging');
dr.text('Hello SVG',100,60).sets({
'font-size': 30,
fill: 'blue',
'text-anchor': 'middle',
});
dr.text('Hello SVG',100,100).style(`
font-size: 30px;
fill: blue;
text-anchor: middle;
dominant-baseline: middle;
`);
pre2.textContent = dr.code(svg1);
hl.hl(div1, pre1);
hl.hl(div2, pre2);
</script>
这个的仔细讲解也特别好，很容易混同和使用中用错的指令呢。
感谢黑黑的详细讲解，辛苦了{:4_187:} 谢谢老师辛苦，学习了。{:4_190:} 小椒学习一下{:4_187:} 小辣椒 发表于 2024-11-20 16:09
小椒学习一下
{:5_108:} 这几个指令在细节上很需要注意呢，什么时候需要小单引号，什么时候需要花括号之类的。
只能多看看，体会和区分其中细节{:4_187:} 补充形式的指令见过set和style，
sets这个加个s的感觉头一回露面的样纸。。{:5_117:}
看来看去这个sets可补充的更详细？有点高级。。 我还是当它是字典，用的时候来查查好了，一时半会儿生记也记不住。。{:4_170:} 花飞飞 发表于 2024-11-20 19:42
我还是当它是字典，用的时候来查查好了，一时半会儿生记也记不住。。
确实不容易记住 花飞飞 发表于 2024-11-20 19:41
补充形式的指令见过set和style，
sets这个加个s的感觉头一回露面的样纸。。
看来看去这个sets可 ...
sets() 是 set() 的升级版 红影 发表于 2024-11-20 19:03
这几个指令在细节上很需要注意呢，什么时候需要小单引号，什么时候需要花括号之类的。
只能多看看，体会和 ...
{:5_108:} 马黑黑 发表于 2024-11-20 20:09
确实不容易记住
那些小引号大引号之类的，你咋就能记住了呢。。{:4_170:}厉害 马黑黑 发表于 2024-11-20 20:10
sets() 是 set() 的升级版
有了升级版就用升级版呗，低配的可不可以去掉算了{:4_173:} 花飞飞 发表于 2024-11-20 20:25
那些小引号大引号之类的，你咋就能记住了呢。。厉害
玩代码的人这个不会是个问题 花飞飞 发表于 2024-11-20 20:26
有了升级版就用升级版呗，低配的可不可以去掉算了
不行。各有各的便利，比方说，我只追加一个属性，用set比用sets方便 马黑黑 发表于 2024-11-20 20:35
玩代码的人这个不会是个问题
{:4_170:}那我就真没办法了。。这经没法取 马黑黑 发表于 2024-11-20 20:36
不行。各有各的便利，比方说，我只追加一个属性，用set比用sets方便
行的，你说了算。。都搁着有用{:4_173:} 花飞飞 发表于 2024-11-20 21:06
行的，你说了算。。都搁着有用
这些都是策划好的 花飞飞 发表于 2024-11-20 21:05
那我就真没办法了。。这经没法取
玩代码首先要过标点符号关，好比学写字首先得过笔画关一样 马黑黑 发表于 2024-11-20 21:08
这些都是策划好的
好哒，缺一不可的样纸。