彩虹伞svg格式图片
本帖最后由 马黑黑 于 2023-11-23 21:24 编辑 <br /><br /><p>图片地址:https://638183.freep.cn/638183/web/svg/7c-umbrella.svg</p><p><br><br>
<p>图片原始尺寸:200 * 200<br><br></p>
<div style="display: flex; align-items: center;">
<label for="tianzheng">调整大小:</label>
<input type="range" min="100" max="1000" step="50" value="200" oninput="imgWH.innerText=this.value;mypic.setAttribute('width',this.value + 'px');mypic.setAttribute('height',this.value + 'px');" />
<output id="imgWH">200</output>
</div>
<div style="width: 1024px; position: relative; margin: 0 0 0 calc(50% - 593px); text-align: center;">
<img id="mypic" width="200px" height="200px" alt="" src="https://638183.freep.cn/638183/web/svg/7c-umbrella.svg" />
</p> 图片原始代码:<svg id="ssvg" width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><path d="M 100 100 L200.00 100.00 A 100 100 0 0 1 162.35 21.82 L100 100" fill="red" /><path d="M 100 100 L162.35 21.82 A 100 100 0 0 1 77.75 2.51 L100 100" fill="orange" /><path d="M 100 100 L77.75 2.51 A 100 100 0 0 1 9.90 56.61 L100 100" fill="yellow" /><path d="M 100 100 L9.90 56.61 A 100 100 0 0 1 9.90 143.39 L100 100" fill="green" /><path d="M 100 100 L9.90 143.39 A 100 100 0 0 1 77.75 197.49 L100 100" fill="cyan" /><path d="M 100 100 L77.75 197.49 A 100 100 0 0 1 162.35 178.18 L100 100" fill="blue" /><path d="M 100 100 L162.35 178.18 A 100 100 0 0 1 200.00 100.00 L100 100" fill="purple" /><circle id="yuan" cx="100" cy="100" r="5" fill="snow" /></svg>
若需要设置透明度,请在图片或使用svg图片做背景的元素使用 opacity 属性进行设置:
<img alt="" src="svg图片地址" style="opacity: 0.7" />
<div style="background: url('svg图片地址') no-repeat center/cover; opacity: 0.7;"></div>
也可以在 CSS 中做设置。 哇,这个太好了,可以直接用在帖子里了{:4_199:} 还能随意调整大小,真的太棒了{:4_199:} 连地址都有了,用起来太方便了{:4_187:} 本帖最后由 马黑黑 于 2023-11-23 21:28 编辑
红影 发表于 2023-11-23 21:25
哇,这个太好了,可以直接用在帖子里了
关键是有可用的上传空间。
也可以将图片原始代码作为HTML元素用在帖子里,然后像控制HTML元素一样控制它 红影 发表于 2023-11-23 21:25
还能随意调整大小,真的太棒了
就像控制图片一样 红影 发表于 2023-11-23 21:26
连地址都有了,用起来太方便了
我这个链接只要不欠费,永久有效 马黑黑 发表于 2023-11-23 21:26
关键是有可用的上传空间。
也可以将图片原始代码作为HTML元素用在帖子里,然后像控制HTML元素一样控制 ...
“将图片原始代码作为HTML元素用在帖子里”,这个好像操控不了{:4_173:} 马黑黑 发表于 2023-11-23 21:28
就像控制图片一样
嗯嗯,而且可以任意放大而不失真{:4_173:} 马黑黑 发表于 2023-11-23 21:29
我这个链接只要不欠费,永久有效
黑黑太贴心了,用自己的空间上传给大家用{:4_187:} 红影 发表于 2023-11-23 21:35
黑黑太贴心了,用自己的空间上传给大家用
这一直如此呀,包括哪些插件,没什么贴不贴心的 红影 发表于 2023-11-23 21:35
嗯嗯,而且可以任意放大而不失真
嗯,这个比png等图片强一点,就是制作有点困难 红影 发表于 2023-11-23 21:34
“将图片原始代码作为HTML元素用在帖子里”,这个好像操控不了
一样的。你可以将svg代码放在一个div里,然后你去控制那个div看看 马黑黑 发表于 2023-11-23 21:37
这一直如此呀,包括哪些插件,没什么贴不贴心的
是的,你那里还有播放器路径汇总等等的,真是个大宝库呢{:4_187:} 马黑黑 发表于 2023-11-23 21:37
嗯,这个比png等图片强一点,就是制作有点困难
更显示出它们的珍贵啊{:4_204:} 马黑黑 发表于 2023-11-23 21:38
一样的。你可以将svg代码放在一个div里,然后你去控制那个div看看
我昨天试过了,不行,可能还没理解怎样把原始代码作为HTML元素的操作。 欣赏学习!{:4_187:} 红影 发表于 2023-11-23 21:55
我昨天试过了,不行,可能还没理解怎样把原始代码作为HTML元素的操作。
<div>
<svg ...>...</svg>
</div<