You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何缩放使用DrawingBrush插入的SVG图像?

能否缩放DrawingImage中的SVG路径图形?

可以,你可以通过以下几种方式实现缩放:

1. 直接给几何图形添加缩放变换

通过给PathGeometry设置ScaleTransform,能精确控制图形的缩放比例和缩放中心,适合需要微调的场景:

<Style x:Key="HamburgerMenuItemStyle" TargetType="{x:Type MenuItem}">
    <Setter Property="Template" Value="{StaticResource MenuItemControlTemplate1}"/>
    <Setter Property="Icon">
        <Setter.Value>
            <DrawingImage>
                <DrawingImage.Drawing>
                    <GeometryDrawing Brush="Red">
                        <GeometryDrawing.Geometry>
                            <PathGeometry Figures="M6 36v-3h36v3Zm0-10.5v-3h36v3ZM6 15v-3h36v3Z">
                                <PathGeometry.Transform>
                                    <!-- ScaleX/Y是缩放比例,CenterX/Y是缩放中心 -->
                                    <ScaleTransform ScaleX="0.7" ScaleY="0.7" CenterX="24" CenterY="21"/>
                                </PathGeometry.Transform>
                            </PathGeometry>
                        </GeometryDrawing.Geometry>
                    </GeometryDrawing>
                </DrawingImage.Drawing>
            </DrawingImage>
        </Setter.Value>
    </Setter>
</Style>

2. 用Image控件包裹并设置尺寸

将DrawingImage放到Image控件中,通过设置Image的Width/Height,配合DrawingImage的Stretch属性让图形自适应尺寸:

<Style x:Key="HamburgerMenuItemStyle" TargetType="{x:Type MenuItem}">
    <Setter Property="Template" Value="{StaticResource MenuItemControlTemplate1}"/>
    <Setter Property="Icon">
        <Setter.Value>
            <Image Width="18" Height="18">
                <Image.Source>
                    <DrawingImage Stretch="Uniform">
                        <DrawingImage.Drawing>
                            <GeometryDrawing Geometry="M6 36v-3h36v3Zm0-10.5v-3h36v3ZM6 15v-3h36v3Z"
                                             Brush="Red"/>
                        </DrawingImage.Drawing>
                    </DrawingImage>
                </Image.Source>
            </Image>
        </Setter.Value>
    </Setter>
</Style>

Stretch="Uniform"会保持图形的宽高比,避免变形。

3. 使用Viewbox自动缩放

用Viewbox包裹DrawingImage,它会自动按比例将图形缩放到指定的Viewbox尺寸,适合需要让图形自适应容器空间的场景:

<Style x:Key="HamburgerMenuItemStyle" TargetType="{x:Type MenuItem}">
    <Setter Property="Template" Value="{StaticResource MenuItemControlTemplate1}"/>
    <Setter Property="Icon">
        <Setter.Value>
            <Viewbox Width="22" Height="22">
                <DrawingImage>
                    <DrawingImage.Drawing>
                        <GeometryDrawing Geometry="M6 36v-3h36v3Zm0-10.5v-3h36v3ZM6 15v-3h36v3Z"
                                         Brush="Red"/>
                    </DrawingImage.Drawing>
                </DrawingImage>
            </Viewbox>
        </Setter.Value>
    </Setter>
</Style>

内容的提问来源于stack exchange,提问作者Aim

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.08 20:45:34