svg基础变形 transform 之 skewX skewY
本帖最后由 马黑黑 于 2023-11-18 12:43 编辑 <br /><br /><style>.papa > p { margin: 10px 0; }
.hCode { display: block; padding: 10px 10px 10px 50px; font: normal 15px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; background: #F7EFE6; overflow-x: auto; tab-size: 4; position: relative; }
.hCode::before { position: absolute; content: attr(data-line); min-width: 20px; left: 0; top: 0; padding: 10px; font: inherit; color: #999; text-align: right; border-right: 1px solid tan; }
.stage { display: grid; place-items: center; }
.rred { color: red; }
.zs { color: green; }
.mydiv { display: grid; place-items: center; width: 200px; height: 200px; border: 1px solid gray; position: relative; }
#div1, #div2 { position: absolute; width: 100px; height: 100px; background: olive; }
#div1 { opacity: .5; }
#div2 { transform: skewX(15deg); }
#div3 { position: absolute; width: 8px; height: 8px; background: red; border-radius: 50%; }
</style>
<div class="papa">
<h2>svg基础变形 transform 之 skewX skewY</h2>
<p>倾斜也被叫做扭曲、斜切等，实际上就是倾斜，形变对象倾斜之后会扭曲，看上去也像是被斜切了。不像CSS，svg的没有独立的skew属性，倾斜形变属性被分开为 skewX 和 skewY 两种，可以单独使用，也可以并列在一起使用：</p>
<pre class="hCode">
transform="skewX(15)" <span class="zs"><-- 沿X轴倾斜15度（svg不要单位，CSS需要表示为 15deg，下同） --></span>
transform="skewY(15)" <span class="zs"><-- 沿Y轴倾斜15度 --></span>
transform="skewX(15) skewX(15)" <span class="zs"><-- 沿X轴、Y轴都倾斜15度 --></span>
</pre>
<svg width="200" height="200" style="border: 1px solid gray;">
<title>svg 倾斜</title>
<rect x="50" y="50" width="100" height="100" fill="olive" opacity=".5" />
<rect id="rectSkew" x="50" y="50" width="100" height="100" fill="olive" transform="skewX(15)" />
<circle cx="100" cy="100" r="4" fill="red" />
</svg>
<p>
<input id="skewX" name="sk" type="radio" value="skewX(15)" checked />
<label for="skewX">skewX(15)</label>
<input id="skewY" name="sk" type="radio" value="skewY(15)" />
<label for="skewY">skewY(15)</label>
<input id="skewXY" name="sk" type="radio" value="skewX(15) skewY(15)" />
<label for="skewXY">skewX(15) skewY(15)</label>
<label> 【 <span class="rred">强制形变基点为矩形中心</span></label>
<input id="cc" name="sk" type="CheckBox" value="0" />
<label> 】 </label>
</p>
<p>为方便比较，我在下面制作一组<span class="rred">CSS+HTML（div）</span>的skew倾斜示例，CSS的 skew、skewX 和 skewY 形变基点默认取形变对象中心的坐标值。</p>
<div class="mydiv" title="css 倾斜">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
<p>
<input id="skewX1" name="sk1" type="radio" value="skewX(15deg)" checked />
<label for="skewX1">skewX(15deg)</label>
<input id="skewY1" name="sk1" type="radio" value="skewY(15deg)" />
<label for="skewY1">skewY(15deg)</label>
<input id="skewXY1" name="sk1" type="radio" value="skew(15deg,15deg)" />
<label for="skewXY1">skew(15,15deg)</label>
</p>
<p>通过比较，应该能发现svg和CSS的倾斜变形行为表现不尽一致，原因是svg的倾斜以svg画布左上角为基点、CSS则以元素（例中使用的是div）自身的中心为倾斜基点；但二者的倾斜姿势则完全一样——为了验证这一点，可以勾选svg倾斜示例的复选按钮再进行比较。</p>
</div>
<script>
let val = 'skewX(15)';
let stages = document.querySelectorAll('.stage'),
hCodes = document.querySelectorAll('.hCode');
hCodes.forEach((item,key) => {
let lines = hCodes.innerText.trim().split('\n').length;
let str = '';
for(let i = 0; i < lines; i ++) {
str += i + 1 + '\n';
}
item.dataset.line = str;
});
let rds = document.getElementsByName('r_scale');
rds.forEach((item) => {
item.onchange = () => redCircle.setAttribute('transform', 'scale(' + item.value + ')');
});
.forEach((item) => {
item.onchange = () => {
val = item.value;
let valnow = cc.checked ? `translate(100,100) ${val} translate(-100,-100)` : val;
rectSkew.setAttribute('transform', valnow);
};
});
.forEach((item) => {
item.onchange = () => div2.style.transform = item.value;
});
cc.onchange = () => {
rectSkew.setAttribute('transform', cc.checked ? `translate(100,100) ${val} translate(-100,-100)` : val);
};
</script>
至此，svg基础变形介绍完了：它们分别是——
① translate
② rotate
③ scale
④ skewX、skewY 这个在线演示真好，可以很直观地进行两者比较了{:4_187:} 当强制设置变形基点为矩形中心时，和CSS是一样的效果呢。 红影 发表于 2023-11-18 14:41
当强制设置变形基点为矩形中心时，和CSS是一样的效果呢。
它们毕竟同源，仅是基点不同 红影 发表于 2023-11-18 14:40
这个在线演示真好，可以很直观地进行两者比较了
{:4_190:} 马黑黑 发表于 2023-11-18 18:26
它们毕竟同源，仅是基点不同
是的，这样比较着，就更清楚了。 马黑黑 发表于 2023-11-18 18:26
现在看来，差不多css里有的，svg也都有呢。 红影 发表于 2023-11-19 13:20
现在看来，差不多css里有的，svg也都有呢。
svg没有那么多元素，只是每一个元素的属性都可能很多。CSS是借鉴很多能用的东东，将来的版本估计可能还要强大 红影 发表于 2023-11-19 13:20
是的，这样比较着，就更清楚了。
不糊涂就清楚 马黑黑 发表于 2023-11-19 19:42
svg没有那么多元素，只是每一个元素的属性都可能很多。CSS是借鉴很多能用的东东，将来的版本估计可能还要 ...
应该是，看好svg. 马黑黑 发表于 2023-11-19 19:42
不糊涂就清楚
学到清楚了，就不会糊涂{:4_173:} 红影 发表于 2023-11-19 23:10
应该是，看好svg.
现在，svg一是做img或background图形应用于HTML中，二是嵌入HTML使用 红影 发表于 2023-11-19 23:12
学到清楚了，就不会糊涂
应该这样 马黑黑 发表于 2023-11-19 23:14
现在，svg一是做img或background图形应用于HTML中，二是嵌入HTML使用
这两种黑黑都演示过。 马黑黑 发表于 2023-11-19 23:15
应该这样
各种变形找准参照，就没问题。 红影 发表于 2023-11-20 15:56
各种变形找准参照，就没问题。
是的 红影 发表于 2023-11-20 15:55
这两种黑黑都演示过。
是的 红影 发表于 2023-11-19 23:12
学到清楚了，就不会糊涂
那就是清楚 马黑黑 发表于 2023-11-20 19:29
是的
这个需要脑子清楚。
页:
[1]
2