控制渲染SVG图形?

如何解决控制渲染SVG图形?

| 我需要一个用于渲染SVG图形的控件。数据以“ 0”对象的形式传入。渲染此类图像的最简单方法是什么? 目前,我正在使用PNG: 但是我想要更高的分辨率。 SVG对此非常适合。 样本SVG:
<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>
<!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\"
 \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">
<!-- Generated by graphviz version 2.28.0 (20110507.0327)
 -->
<!-- Title: G Pages: 1 -->
<svg width=\"262pt\" height=\"216pt\"
 viewBox=\"0.00 0.00 262.00 216.00\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">
<g id=\"graph1\" class=\"graph\" transform=\"scale(1 1) rotate(0) translate(4 212)\">
<title>G</title>
<polygon fill=\"white\" stroke=\"white\" points=\"-4,5 -4,-212 259,5\"/>
<!-- a -->
<g id=\"node1\" class=\"node\"><title>a</title>
<polygon fill=\"purple\" stroke=\"purple\" points=\"159.618,-186.523 133,-198.872 106.382,-186.523 116.549,-166.541 149.451,-166.541 159.618,-186.523\"/>
<polygon fill=\"none\" stroke=\"purple\" points=\"165.003,-188.397 133,-203.245 100.997,-188.397 114.139,-162.57 151.861,-162.57 165.003,-188.397\"/>
<polygon fill=\"none\" stroke=\"purple\" points=\"170.387,-190.272 133,-207.617 95.6126,-190.272 111.729,-158.598 154.271,-158.598 170.387,-190.272\"/>
<text text-anchor=\"middle\" x=\"133\" y=\"-177.3\" font-family=\"Times New Roman,serif\" font-size=\"14.00\">a</text>
</g>
<!-- b -->
<g id=\"node3\" class=\"node\"><title>b</title>
<ellipse fill=\"none\" stroke=\"black\" cx=\"133\" cy=\"-100\" rx=\"27\" ry=\"18\"/>
<text text-anchor=\"middle\" x=\"133\" y=\"-96.3\" font-family=\"Times New Roman,serif\" font-size=\"14.00\">b</text>
</g>
<!-- a&#45;&gt;b -->
<g id=\"edge2\" class=\"edge\"><title>a&#45;&gt;b</title>
<path fill=\"none\" stroke=\"black\" d=\"M133,-158.413C133,-149.086 133,-138.069 133,-128.192\"/>
<polygon fill=\"black\" stroke=\"black\" points=\"136.5,-128.057 133,-118.057 129.5,-128.057 136.5,-128.057\"/>
</g>
<!-- c -->
<g id=\"node4\" class=\"node\"><title>c</title>
<polygon fill=\"none\" stroke=\"black\" points=\"144.42,-41 22.2639,-41 -0.419833,-5 121.736,-5 144.42,-41\"/>
<text text-anchor=\"middle\" x=\"72\" y=\"-19.3\" font-family=\"Times New Roman,serif\" font-size=\"14.00\">hello world</text>
</g>
<!-- b&#45;&gt;c -->
<g id=\"edge3\" class=\"edge\"><title>b&#45;&gt;c</title>
<path fill=\"none\" stroke=\"black\" d=\"M120.656,-83.8226C112.588,-73.903 101.855,-60.7069 92.5226,-49.2327\"/>
<polygon fill=\"black\" stroke=\"black\" points=\"95.0581,-46.8031 86.0329,-41.2536 89.6275,-51.22 95.0581,-46.8031\"/>
</g>
<!-- d -->
<g id=\"node6\" class=\"node\"><title>d</title>
<polygon fill=\"none\" stroke=\"black\" points=\"194,-3.55271e-015 225.296,-34.5 162.704,-34.5 194,-3.55271e-015\"/>
<text text-anchor=\"middle\" x=\"194\" y=\"-19.3\" font-family=\"Times New Roman,serif\" font-size=\"14.00\">d</text>
</g>
<!-- b&#45;&gt;d -->
<g id=\"edge5\" class=\"edge\"><title>b&#45;&gt;d</title>
<path fill=\"none\" stroke=\"black\" d=\"M145.344,-83.8226C154.961,-71.9983 168.365,-55.5183 178.67,-42.8489\"/>
<polygon fill=\"black\" stroke=\"black\" points=\"181.629,-44.757 185.224,-34.7906 176.199,-40.3401 181.629,-44.757\"/>
</g>
<!-- e -->
<g id=\"node7\" class=\"node\"><title>e</title>
<polygon fill=\"none\" stroke=\"black\" points=\"254.137,-199 189.863,-199 208.407,-163 235.593,-163 254.137,-199\"/>
<text text-anchor=\"middle\" x=\"222\" y=\"-177.3\" font-family=\"Times New Roman,serif\" font-size=\"14.00\">e</text>
</g>
</g>
</svg>
    

解决方法

当我研究过在WPF应用程序中使用SVG时,发现可以添加一些软件包来提供此功能,但是最后还是使用了转换为XAML的SVG,它们可以进行扩展。 WPF应用程序与SVG图像可以在浏览器等上缩放的方式相同。如果您可以访问SVG代码(看起来像您一样),那么这可能是一个不错的解决方案。 这些是我用来实现此目的的步骤: 将SVG转换为XAML 我更喜欢将Inkscape用于以下步骤。 在图像编辑器(例如Inkscape)中打开SVG。编辑器必须支持打开SVG并将SVG保存为XAML文件。 在编辑器中,将文件另存为XAML。如果可以选择的话,文件应该保存为Silverlight兼容。关闭图像编辑器。 如果需要任何颜色更改,请在文本编辑器(例如Notepad ++,Visual Studio)中打开文件,并找到具有颜色值的任何路径(查找类似\'fill =“#000000” \'的东西)并将其更改为所需的十六进制颜色值。保存文件,完成后关闭文本编辑器。 在WPF项目中使用XAML图像 右键单击应保留图像的资源文件夹(例如\\ Resources \\ Images),然后选择添加现有文件的选项。 确保文件选择类型包括XAML文件。导航到要使用的文件并添加它。 在Visual Studio中打开“属性”窗格(右键单击该文件,然后单击“属性”选项)。在“属性”窗格的“高级”部分下,将“生成操作”设置为“资源”,将“复制到输出目录”设置为“请勿复制”。 现在可以通过设置项目的来源来使用图像,以将图像(例如框架)显示到资源路径(例如“ /resources/images/.xaml”)。可以直接设置或通过绑定设置。 用于显示XAML图像的示例WPF / XAML代码 以下代码显示了如何显示使用上述步骤添加的XAML图像的示例。此代码将缩放图像以填充其添加到的容器。图像的来源是通过用于Frame元素的来源的绑定提供的。可以用图像路径的字符串替换(这是通过绑定值提供的)。
<Viewbox Stretch=\"Uniform\"
         Margin=\"4,4\"
         VerticalAlignment=\"Center\">
             <Frame Source=\"{Binding ImageSource}\" 
                    NavigationUIVisibility=\"Hidden\"/>
</Viewbox>
路径字符串的示例是:
/resources/images/<file-name>.xaml
如果映像位于DLL中并且在同一DLL中使用,则路径字符串将需要使用以下格式包含更多信息:
/<AssemblyName>;component/resources/images/<file-name>.xaml
    

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


依赖报错 idea导入项目后依赖报错,解决方案:https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错:更换其他版本 无法下载依赖可参考:https://blog.csdn.net/weixin_42628809/a
错误1:代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
错误1:gradle项目控制台输出为乱码 # 解决方案:https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
错误还原:在查询的过程中,传入的workType为0时,该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
报错如下,gcc版本太低 ^ server.c:5346:31: 错误:‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
解决方案1 1、改项目中.idea/workspace.xml配置文件,增加dynamic.classpath参数 2、搜索PropertiesComponent,添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
删除根组件app.vue中的默认代码后报错:Module Error (from ./node_modules/eslint-loader/index.js): 解决方案:关闭ESlint代码检测,在项目根目录创建vue.config.js,在文件中添加 module.exports = { lin
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
错误1:Request method ‘DELETE‘ not supported 错误还原:controller层有一个接口,访问该接口时报错:Request method ‘DELETE‘ not supported 错误原因:没有接收到前端传入的参数,修改为如下 参考 错误2:cannot r
错误1:启动docker镜像时报错:Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法:重启docker -&gt; systemctl r
错误1:private field ‘xxx‘ is never assigned 按Altʾnter快捷键,选择第2项 参考:https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2:启动时报错,不能找到主启动类 #
报错如下,通过源不能下载,最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
错误1:maven打包报错 错误还原:使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
错误1:服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
错误1:运行项目后报如下错误 解决方案 报错2:Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案:在pom.
参考 错误原因 过滤器或拦截器在生效时,redisTemplate还没有注入 解决方案:在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-