马黑黑 发表于 2023-11-23 21:17

彩虹伞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>

马黑黑 发表于 2023-11-23 21:19

图片原始代码:<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>

马黑黑 发表于 2023-11-23 21:23

若需要设置透明度,请在图片或使用svg图片做背景的元素使用 opacity 属性进行设置:

<img alt="" src="svg图片地址" style="opacity: 0.7" />
<div style="background: url('svg图片地址') no-repeat center/cover; opacity: 0.7;"></div>

也可以在 CSS 中做设置。

红影 发表于 2023-11-23 21:25

哇,这个太好了,可以直接用在帖子里了{:4_199:}

红影 发表于 2023-11-23 21:25

还能随意调整大小,真的太棒了{:4_199:}

红影 发表于 2023-11-23 21:26

连地址都有了,用起来太方便了{:4_187:}

马黑黑 发表于 2023-11-23 21:26

本帖最后由 马黑黑 于 2023-11-23 21:28 编辑

红影 发表于 2023-11-23 21:25
哇,这个太好了,可以直接用在帖子里了
关键是有可用的上传空间。

也可以将图片原始代码作为HTML元素用在帖子里,然后像控制HTML元素一样控制它

马黑黑 发表于 2023-11-23 21:28

红影 发表于 2023-11-23 21:25
还能随意调整大小,真的太棒了

就像控制图片一样

马黑黑 发表于 2023-11-23 21:29

红影 发表于 2023-11-23 21:26
连地址都有了,用起来太方便了

我这个链接只要不欠费,永久有效

红影 发表于 2023-11-23 21:34

马黑黑 发表于 2023-11-23 21:26
关键是有可用的上传空间。

也可以将图片原始代码作为HTML元素用在帖子里,然后像控制HTML元素一样控制 ...

“将图片原始代码作为HTML元素用在帖子里”,这个好像操控不了{:4_173:}

红影 发表于 2023-11-23 21:35

马黑黑 发表于 2023-11-23 21:28
就像控制图片一样

嗯嗯,而且可以任意放大而不失真{:4_173:}

红影 发表于 2023-11-23 21:35

马黑黑 发表于 2023-11-23 21:29
我这个链接只要不欠费,永久有效

黑黑太贴心了,用自己的空间上传给大家用{:4_187:}

马黑黑 发表于 2023-11-23 21:37

红影 发表于 2023-11-23 21:35
黑黑太贴心了,用自己的空间上传给大家用

这一直如此呀,包括哪些插件,没什么贴不贴心的

马黑黑 发表于 2023-11-23 21:37

红影 发表于 2023-11-23 21:35
嗯嗯,而且可以任意放大而不失真

嗯,这个比png等图片强一点,就是制作有点困难

马黑黑 发表于 2023-11-23 21:38

红影 发表于 2023-11-23 21:34
“将图片原始代码作为HTML元素用在帖子里”,这个好像操控不了

一样的。你可以将svg代码放在一个div里,然后你去控制那个div看看

红影 发表于 2023-11-23 21:46

马黑黑 发表于 2023-11-23 21:37
这一直如此呀,包括哪些插件,没什么贴不贴心的

是的,你那里还有播放器路径汇总等等的,真是个大宝库呢{:4_187:}

红影 发表于 2023-11-23 21:48

马黑黑 发表于 2023-11-23 21:37
嗯,这个比png等图片强一点,就是制作有点困难

更显示出它们的珍贵啊{:4_204:}

红影 发表于 2023-11-23 21:55

马黑黑 发表于 2023-11-23 21:38
一样的。你可以将svg代码放在一个div里,然后你去控制那个div看看

我昨天试过了,不行,可能还没理解怎样把原始代码作为HTML元素的操作。

焱鑫磊 发表于 2023-11-23 22:50

欣赏学习!{:4_187:}

马黑黑 发表于 2023-11-23 22:52

红影 发表于 2023-11-23 21:55
我昨天试过了,不行,可能还没理解怎样把原始代码作为HTML元素的操作。

<div>
    <svg ...>...</svg>
</div<
页: [1] 2 3 4 5 6 7 8 9 10
查看完整版本: 彩虹伞svg格式图片