这是一个基于WPF的桌面项目。该项目的一部分读取包含多个path
元素的SVG文件。我使用Svg包加载和解析SVG内容。
在ViewModel层,我有一个名为Path
的Model类。一旦SVG元素被加载和解析,我就为每个path
元素创建Path
对象,并对其属性(例如路径数据,笔划,填充等)进行水合。ViewModel公开了一个包含所有这些路径模型的集合属性。
在视图层,我有一个ItemsControl
,它使用一个Canvas
作为面板,还有一个ItemTemplate
,它包含一个WPF Path
对象,其PathData
绑定到模型的路径数据,Fill
绑定到模型的填充属性,等等。
到目前为止一切顺利。我可以阅读SVG,创建我的模型,它们显示在视图中,但是...
由于SVG路径没有位置或大小属性,我需要计算这些属性以将WPF Path
对象放置在正确的位置。幸运的是,Svg库提供了SvgPath.Bounds
属性,该属性返回SVG路径的边界框。我使用它来水合模型的Location
和Size
属性。然而,这会导致一个奇怪的缩放和重新定位的输出。下面是一个实际的SVG与WPF渲染的例子:
我也尝试过使用GetFlattenedPathGeometry
重新缩放路径,但它并没有像它应该的那样显示出来。
我需要修正什么?
编辑
下面是问题SVG文件:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
viewBox="0 0 36 36"
version="1.1"
id="svg24"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs28" />
<path
fill="#4289c1"
d="M 281.73267,37.528917 V 248.00919 c 0,0 0,31.18229 -31.18227,31.18229 H 32.274555 c -31.1822696,0 -31.1822696,-31.18229 -31.1822696,-31.18229 v -38.97782 c 0,0 194.8891546,-15.59113 280.6403846,-171.502453 z"
id="path2"
style="stroke-width:7.79557" />
<path
fill="#1c6399"
d="m 249.3343,179.74342 c 0,0 19.99561,-12.74575 17.60238,-17.83625 -2.40883,-5.09828 -91.81619,7.71762 -136.64067,23.02811 -67.252365,22.97354 -102.464935,58.63824 -97.647265,68.81925 4.80986,10.18101 59.2619,15.22475 126.506445,-7.74099 44.8401,-15.31049 119.80225,-58.65385 117.40123,-63.74433 -2.40884,-5.09053 -27.22212,-2.52579 -27.22212,-2.52579 z"
id="path4"
style="stroke-width:7.79557" />
<path
fill="#a6d388"
d="m 246.44994,175.87685 c 0,0 20.65824,-12.62103 18.31177,-17.85965 -2.36206,-5.24642 -93.87421,6.09614 -139.92262,20.85312 -69.099895,22.14723 -105.731245,57.8743 -101.014925,68.35931 4.71631,10.48505 60.20516,16.69032 129.289465,-5.44908 46.07177,-14.757 123.42718,-57.55467 121.0807,-62.79329 -2.36203,-5.24642 -27.74439,-3.11041 -27.74439,-3.11041 z"
id="path6"
style="stroke-width:7.79557" />
<path
fill="#f5f8fa"
d="m 246.44994,175.87685 c 0,0 19.54347,-11.95842 18.38192,-17.42311 L 30.372425,232.24658 c -5.6284,6.52489 -7.94367,11.87264 -6.54826,14.98305 1.21609,2.71289 5.88565,5.12171 13.25244,6.84452 L 274.02285,179.50176 c 0.0249,-0.15589 0.226,-0.39756 0.17145,-0.51453 -2.36203,-5.24642 -27.74439,-3.11041 -27.74439,-3.11041 z"
id="path8"
style="stroke-width:7.79557" />
<path
fill="#af7e57"
d="m 217.45822,93.914237 c -4.59159,-1.83194 -10.50841,-2.15157 -16.40186,-3.00906 -9.33911,-1.364229 -22.23297,-5.963629 -27.51057,-8.465999 -6.43134,-3.85879 -20.08917,-12.948431 -23.48023,-15.185771 -3.39109,-2.23731 -7.92808,-5.33994 -13.52531,-6.33779 h -1.21612 c 3.00131,4.2252 4.74751,9.03506 5.83108,22.147201 0,0 25.87349,12.948419 28.02507,13.665629 8.77001,2.92335 24.80548,2.85317 33.86395,3.991333 4.69291,0.59247 7.95925,-0.10902 11.68555,-0.36637 5.62839,-0.381993 10.75788,-0.428743 11.08528,-2.892143 0.38977,-2.861 -4.63835,-2.06583 -8.35684,-3.54701 z M 115.67152,6.3232673 c -12.41834,-4.88782 -31.782535,1.4188 -34.027655,15.9263397 -2.23734,14.40621 1.86315,37.00556 14.52313,35.64133 13.268065,-1.43439 26.879135,-4.31876 32.258055,-17.98437 5.37896,-13.65783 -0.33517,-28.69548 -12.75353,-33.5832997 z"
id="path10"
style="stroke-width:7.79557" />
<path
fill="#af7e57"
d="m 124.90147,43.430147 c 18.07013,-21.22731 -25.460335,-19.16147 -25.460335,-19.16147 -8.23989,0.2962 -2.56474,14.02421 -6.44693,21.52354 -2.65829,5.18405 8.536165,7.93588 8.536165,7.93588 0,0 5.13726,-0.0781 5.41013,6.15852 v 0.0547 c 0.0624,1.59029 -0.10136,3.46903 -0.84193,5.99479 -3.68732,12.480681 13.07315,20.128151 16.75265,7.624071 1.45779,-4.950201 0.88872,-9.300131 0.15588,-13.314841 l -0.0701,-0.35859 c -1.12255,-5.97141 -2.51018,-11.21003 1.9645,-16.45646 z m -38.065745,20.6193 c -12.98741,7.740991 -26.25546,23.768661 -31.02637,30.51182 -2.8064,2.20616 -5.34776,4.78649 -6.9926,5.737553 -3.03249,1.73841 -16.79167,11.16325 -25.99044,15.63013 -2.75962,1.29405 -11.36593,3.41445 -15.5287596,6.08832 -3.36769,2.16716 -6.58724005,2.04244 -5.66738,4.77088 0.79514,2.35428 3.96015,1.68386 9.5651496,1.02902 5.60503,-0.65483 15.03766,-2.25292 18.12471,-4.4123 6.23644,-4.13944 26.09176,-9.01167 35.83621,-15.8328 1.72283,-1.20831 18.59243,-16.861793 21.67948,-21.367642 4.23299,-11.81027 2.19833,-19.925441 0,-22.154981 z"
id="path12"
style="stroke-width:7.79557" />
<path
fill="#60352a"
d="M 129.85944,11.335807 C 121.58834,1.6537373 110.21461,-2.3609827 90.733505,5.1695173 73.715785,11.748967 79.188265,25.274277 83.156215,22.959007 c 14.56989,-8.49718 22.599335,4.00691 28.820215,17.68814 4.07707,8.97269 12.16107,11.70894 12.16107,11.70894 0,0 2.62712,1.02903 7.10954,-7.80336 4.48246,-8.83239 6.82893,-23.60498 -1.3876,-33.21692 z"
id="path14"
style="stroke-width:7.79557;fill:#0000ff" />
<path
fill="#af7e57"
d="m 127.85599,220.19464 c -2.94672,-0.77955 -5.22303,-3.36769 -6.29101,-6.11953 -0.45993,-1.18494 -2.84538,-7.80336 -2.84538,-7.80336 h -14.18015 c 0.33524,1.66825 -0.28842,5.42572 -1.04461,9.3313 -0.48334,2.51018 -0.88869,6.95363 -0.10135,8.52054 0.78734,1.56692 6.36897,5.76874 10.14202,6.54048 9.64312,1.98787 19.41876,-2.6661 20.61146,-4.0303 1.73061,-1.98787 -3.33649,-5.6596 -6.29101,-6.43913 z m 58.54468,-25.11733 c -2.60372,-0.50675 -4.7319,-2.61931 -5.81548,-4.94239 -0.46772,-1.00563 -1.71501,-5.07492 -1.71501,-5.07492 l -12.54307,1.71504 c 0.38978,1.42658 -0.21036,3.25074 -0.0624,6.18187 0.1326,2.61153 -0.45215,5.83108 0.32746,7.14855 0.77174,1.31745 4.68511,4.45126 8.00604,4.90341 8.48156,1.15372 16.69028,-3.45345 17.64916,-4.70853 1.37201,-1.83195 -3.24297,-4.71632 -5.84669,-5.22303 z"
id="path16"
style="stroke-width:7.79557" />
<path
fill="#60352a"
d="m 127.28692,15.849457 c 6.82113,-10.2277897 21.62489,-11.2100297 28.35247,-3.65614 6.72757,7.55392 9.23775,17.54002 18.22602,17.54002 2.86878,0 4.30315,2.68169 -1.65265,5.36337 -5.95583,2.68166 -30.31697,8.03721 -39.57028,-9.26114 -4.13947,-5.1139 -5.35556,-9.98611 -5.35556,-9.98611 z"
id="path18"
style="stroke-width:7.79557;fill:#ff0000" />
<path
fill="#292f33"
d="m 178.65188,171.93228 c 0.17941,-5.50367 3.2118,-17.09567 2.06583,-22.0147 -1.78518,-7.64743 -11.69336,-15.95751 -20.86873,-22.98131 -9.17538,-7.02381 -18.51445,-11.21003 -18.51445,-11.21003 -2.35428,-14.78038 1.88651,-22.575943 1.83194,-28.968302 -0.0468,-5.3322 -3.37547,-20.642691 -7.84234,-25.842321 h -12.20004 c 0,0 1.91769,7.8969 -5.04374,8.66868 -6.97702,0.77175 -11.28019,-8.66868 -11.28019,-8.66868 l -13.626635,1.30185 c -2.16718,0.33524 -4.27977,0.97447 -6.3378,1.83976 2.93113,4.98137 1.79297,17.812891 0,22.147201 6.41573,9.261149 11.97398,23.410112 8.93371,40.973492 -2.69727,15.60673 3.68729,30.31698 3.68729,33.70804 0,0 -3.92117,13.63443 -1.55911,22.59154 3.141625,11.91943 5.987005,22.48243 6.314435,26.68422 11.00732,0 15.44299,-3.04026 15.44299,-3.04026 0,0 -2.16715,-4.97356 -1.28625,-12.29362 0.53788,-4.45904 2.73623,-11.34254 2.73623,-17.96097 0,-6.61844 -0.17152,-11.38933 0.81076,-14.12557 0.98223,-2.73623 4.05367,-12.28579 6.32999,-21.0792 4.16283,2.27629 11.63878,6.1741 16.24596,7.43698 6.61844,1.80855 11.64657,4.63835 13.39278,6.15848 1.7462,1.52013 2.93112,2.61153 2.93112,2.61153 0,0 -0.54566,4.87221 -0.0781,12.34035 0.42875,6.83674 4.13166,12.09094 4.958,20.2373 6.96143,-1.03681 13.55648,-4.11605 13.55648,-4.11605 0,0 -0.74838,-9.877 -0.60026,-14.39841 z"
id="path20"
style="stroke-width:7.79557" />
<path
fill="#67757f"
d="m 97.562405,65.546187 7.047205,-0.67042 c 0,0 9.37028,10.703311 16.33951,9.931561 6.96924,-0.77178 6.55607,-10.555201 6.55607,-10.555201 h 9.89258 c -0.66264,-1.30966 -1.34865,-2.48678 -2.07364,-3.33651 h -12.20004 c 0,0 1.91769,7.8969 -5.04374,8.66868 -6.97702,0.77175 -11.28019,-8.66868 -11.28019,-8.66868 l -13.626635,1.30185 c -2.16718,0.33524 -4.27977,0.97447 -6.3378,1.83976 0.60025,1.02122 0.99783,2.42443 1.28625,3.96796 2.69727,-0.91989 7.58509,-2.19836 9.44043,-2.479 z M 165.12658,173.54596 c -0.46772,-7.46815 0.0781,-12.34038 0.0781,-12.34038 0,0 -1.17714,-1.09918 -2.93112,-2.61153 -0.5301,-0.45993 -1.44998,-1.06017 -2.54135,-1.69942 l 1.08356,0.98224 c 0,0 -0.54566,4.87223 -0.0781,12.34038 0.42875,6.83671 4.13166,12.09092 4.958,20.2373 1.23168,-0.18708 2.43999,-0.44437 3.61714,-0.725 -1.36424,-5.94801 -3.83543,-10.57859 -4.18623,-16.18359 z m -62.84005,13.26025 c -2.362065,-8.95711 1.55911,-22.59155 1.55911,-22.59155 0,-3.39105 -6.220865,-21.75742 -3.52358,-37.36413 31.18226,-0.16379 41.00466,-11.12429 41.00466,-11.12429 0,0 -21.19613,9.82242 -40.54474,4.15505 -0.57684,-13.93848 -6.142895,-28.539573 -13.307025,-35.695902 -0.19481,0.77955 -0.41318,1.46556 -0.63923,2.01126 6.41573,9.261119 11.97398,23.410082 8.93371,40.973502 -2.69727,15.60672 3.68729,30.31694 3.68729,33.70802 0,0 -3.92117,13.63444 -1.55911,22.59155 3.141625,11.91941 5.987005,22.48241 6.314435,26.68422 1.3876,0 2.66607,-0.0468 3.85099,-0.13259 -1.00563,-5.23862 -3.28192,-13.76697 -5.77651,-23.21521 z"
id="path22"
style="stroke-width:7.79557" />
</svg>
1条答案
按热度按时间pu82cl6c1#
终于想通了
SVG库中的
Path.Bounds
属性没有返回Path对象的正确边界。这是reported on project website。下面是他们必须说的:Bounds不会为用户返回准确的值。(如果有的话,它用于呈现。)
他们没有指定获取实际路径边界的正确方法。在我的例子中,我已经开始使用WPF来计算真实的边界,可以使用:
Geometry.Parse(pathData).Bounds.Size
我的应用程序现在显示它就像原始的SVG一样。