svg代码应用于button

将svg代码的path属性应用于按钮内容,去掉按钮边框,并且自适应svg大小,以下实现的是一个旋转按钮。
svg代码如下(iconfont下载):

<svg t="1710741485848" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4468" width="32" height="32"><path d="M938.336973 255.26894c-16.685369-6.020494-35.090879 2.752226-40.939358 19.437594l-24.770032 69.493701c-29.070385-65.537376-74.998152-123.162103-133.48295-166.337645-185.947253-137.611288-450.848984-100.112212-590.180413 83.942886C81.534688 350.908785 52.980346 460.653788 68.805644 570.742819c15.825298 110.605073 74.48211 208.481102 164.789518 275.394591 75.686209 55.904586 164.273476 83.082815 252.172686 83.082815 128.494541 0 255.26894-57.624727 338.007727-166.853687 36.639006-48.335965 61.581052-102.348396 74.48211-160.833193 3.78431-17.373425-7.224593-34.402822-24.426004-38.187133-17.201411-3.78431-34.402822 7.052579-38.187133 24.426004-10.836889 49.36805-31.994625 95.123803-62.957164 135.891147-118.173694 156.016798-342.996136 187.839409-500.90509 70.869814-76.546279-56.592642-126.086343-139.33143-139.503444-232.907106-13.417101-93.059634 10.664875-185.775239 67.77356-261.11742C318.05409 144.491853 542.704519 112.497228 700.785486 229.466823c57.280699 42.315471 100.112212 100.972283 123.334117 167.197715l-110.261045-43.003528c-16.513355-6.364522-35.090879 1.720141-41.627415 18.233496-6.536536 16.513355 1.720141 35.090879 18.233496 41.627415l162.38132 63.473207c3.78431 1.548127 7.740635 2.236183 11.69696 2.236183 0.516042 0 1.032085-0.172014 1.548127-0.172014 1.204099 0.172014 2.408198 0.688056 3.612296 0.688056 13.245087 0 25.630102-8.256677 30.274483-21.32975l57.796741-161.693264C963.623047 279.694944 955.022342 261.289434 938.336973 255.26894z" fill="#575B66" p-id="4469"></path></svg>

xaml如下:

<UserControl.Resources>
	<Style x:Key="NoBorderButton" TargetType="Button">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Button">
                        <ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center"/>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
    </Style>
<UserControl.Resources>
<Button Cursor="Hand" Height="20" Width="20" Style="{StaticResource NoBorderButton}">
	<Grid>
		<Viewbox Stretch="Uniform">
			<Path Data="M938.336973 255.26894c-16.685369-6.020494-35.090879 2.752226-40.939358 19.437594l-24.770032 69.493701c-29.070385-65.537376-74.998152-123.162103-133.48295-166.337645-185.947253-137.611288-450.848984-100.112212-590.180413 83.942886C81.534688 350.908785 52.980346 460.653788 68.805644 570.742819c15.825298 110.605073 74.48211 208.481102 164.789518 275.394591 75.686209 55.904586 164.273476 83.082815 252.172686 83.082815 128.494541 0 255.26894-57.624727 338.007727-166.853687 36.639006-48.335965 61.581052-102.348396 74.48211-160.833193 3.78431-17.373425-7.224593-34.402822-24.426004-38.187133-17.201411-3.78431-34.402822 7.052579-38.187133 24.426004-10.836889 49.36805-31.994625 95.123803-62.957164 135.891147-118.173694 156.016798-342.996136 187.839409-500.90509 70.869814-76.546279-56.592642-126.086343-139.33143-139.503444-232.907106-13.417101-93.059634 10.664875-185.775239 67.77356-261.11742C318.05409 144.491853 542.704519 112.497228 700.785486 229.466823c57.280699 42.315471 100.112212 100.972283 123.334117 167.197715l-110.261045-43.003528c-16.513355-6.364522-35.090879 1.720141-41.627415 18.233496-6.536536 16.513355 1.720141 35.090879 18.233496 41.627415l162.38132 63.473207c3.78431 1.548127 7.740635 2.236183 11.69696 2.236183 0.516042 0 1.032085-0.172014 1.548127-0.172014 1.204099 0.172014 2.408198 0.688056 3.612296 0.688056 13.245087 0 25.630102-8.256677 30.274483-21.32975l57.796741-161.693264C963.623047 279.694944 955.022342 261.289434 938.336973 255.26894z" Fill="Black" />
		</Viewbox>
		<TextBlock Background="Transparent" Cursor="Hand"></TextBlock>
	</Grid>
</Button>

TextBlock是为了解决只有点击到路径才能触发点击事件问题。
效果如下:
在这里插入图片描述

  • 9
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
当使用 Vue 3 结合 D3.js 来实现可视化时,经常需要通过按钮来放大或缩小 SVG 视图。下面是一个基于 Vue 3 和 D3.js 的通过按钮放大或缩小 SVG 视图的示例代码: ``` <template> <div> <div ref="container"> <svg :width="width" :height="height" ref="svg"> <g :transform="`translate(${margin.left}, ${margin.top})`" ref="g"> <circle cx="50" cy="50" r="50" fill="red"/> </g> </svg> </div> <div> <button @click="zoomIn">放大</button> <button @click="zoomOut">缩小</button> </div> </div> </template> <script> import * as d3 from 'd3'; import { ref, onMounted } from 'vue'; export default { setup() { const container = ref(null); const svg = ref(null); const g = ref(null); const width = 500; const height = 500; const margin = { top: 20, right: 20, bottom: 20, left: 20 }; const zoom = d3.zoom().on('zoom', zoomed); function zoomed() { const transform = d3.event.transform; g.value.setAttribute('transform', transform); } function zoomIn() { const scale = d3.zoomTransform(svg.value).scale(); const newScale = scale + 0.1; zoomTo(newScale); } function zoomOut() { const scale = d3.zoomTransform(svg.value).scale(); const newScale = Math.max(0.1, scale - 0.1); zoomTo(newScale); } function zoomTo(scale) { const newTransform = d3.zoomIdentity.scale(scale); d3.select(svg.value) .transition() .duration(500) .call(zoom.transform, newTransform); } onMounted(() => { d3.select(container.value) .call(zoom) .call(zoom.transform, d3.zoomIdentity.translate(margin.left, margin.top)); }); return { container, svg, g, width, height, margin, zoomIn, zoomOut, }; }, }; </script> ``` 在这个示例代码中,我们使用了 Vue 3 的 `ref` 函数来声明了一个指向容器元素、SVG 元素和 `g` 元素的引用 `container`、`svg` 和 `g`,并且定义了 SVG 视图的大小 `width` 和 `height`,以及 SVG 视图内部的边距 `margin`。 在 `setup` 函数中,我们使用 D3.js 的 `zoom` 函数来创建一个缩放操作,并将其绑定到容器元素上。在 `zoomed` 函数中,我们使用当前缩放的变换矩阵来更新 `g` 元素的变换属性。 同时,我们定义了 `zoomIn` 和 `zoomOut` 函数来放大和缩小 SVG 视图,分别计算当前缩放比例并进行相应的缩放操作。在 `zoomTo` 函数中,我们使用 `transition` 函数来实现缓动效果,并使用 `call` 函数将缩放操作应用SVG 元素上。 最后,在模板中,我们添加了两个按钮来触发放大和缩小操作,并使用 `@click` 事件绑定相应的函数。 注意:在使用 Vue 3 和 D3.js 结合实现可视化的过程中,需要注意缩放操作的兼容性和性能问题。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

vegetablesssss

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值