如何解决如何根据浏览器宽度更改SVG?
我正在寻找基于浏览器宽度动态更改svg形状的最佳方法。将宽度设置为100%会拉伸形状以适应浏览器的宽度,但也会缩放或扭曲形状...我要做什么:sketch
是否可以使用Javascript执行此操作,或者有更好的方法吗? HTML画布?谢谢!
解决方法
您正在寻求一种涉及SVG的替代方法时,这里就是一个。不幸的是,我不会说它比使用画布更容易。
无论如何-为了能够独立地拉伸形状的一部分,我们实际上需要将该形状分成两部分。这样,左侧部分可以保持静态。
我们可以很容易地看到有一个四分之一圈
和右梯形
使用绘图命令构造它们很简单-只是将它们并排将无法完成工作。
这里的诀窍是使四分之一圆成为固定大小-例如80 x 80像素-并且不不能给梯形一个尺寸。相反,我们需要使用形状的URL填充普通background-image
元素的CSS <div>
属性。这也可以在线完成。要使其延伸到浏览器窗口,我们需要使其宽度为剩余空间的100%-这可以通过将元素的overflow
属性设置为hidden
来实现。现在,只需使背景的高度等于四分之一圆的高度,并将background-repeat
属性设置为no-repeat
。
现在,浏览器将背景图像拉伸到静态四分之一圆旁边的其余宽度以及固定的80像素高度。
这是一个例子:
.svgB {
overflow: hidden;
background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 5 5' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none'><polygon points='0,0 5,2.5 0,5' style='fill:grey;'/></svg>");
background-repeat: no-repeat;
background-size: 100% 80px;
}
.svgB>* {
color: white;
padding-left: 5px;
}
.svgA {
float: left;
width: 80px;
height: 80px;
}
<div class="svgA">
<svg viewBox="0 0 5 5" xmlns="http://www.w3.org/2000/svg">
<path fill="black" d="M5,5 a5,5 0 0,1 -5,-5 L5,0" />
</svg>
</div>
<div class="svgB" style="height:80px;">
<p>Here's some text</p>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。