how to remove space around SvgPicture in flutter? - flutter

Whenever I add a SvgPicture somehow there is extra space that is created between the container, I have no idea how this space is being created.
I have tried changing the width and height, changing the actual size of SVG using Inkscape and changing the fit of the SvgPicture but something fixed the issue.
IconButton(icon: SvgPicture.asset('assets/icons/drawing.svg'), onPressed: null)
Here is the image of this code:
IconButton(icon: SvgPicture.asset('assets/icons/drawing.svg', width: 15), onPressed: null)
Here is the image of this code:
The actual SVG file has no space around it and is completely filled to the canvas.
Note: There is nothing inside the column except this SVG.
SVG CODE
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 5.2916665 5.2916665"
version="1.1"
id="svg882">
<defs
id="defs876" />
<metadata
id="metadata879">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1">
<g
id="g14"
transform="matrix(0.01414769,0,0,0.01414769,0,-0.32822657)">
<g
id="g12">
<g
id="g10">
<path
d="M 327.6,67.6 C 320.8,42 297.2,23.2 270.4,23.2 H 59.2 C 26.8,23.2 0,49.6 0,82.4 v 98 C 0,208 19.6,232 46,238 c 6.4,25.6 29.6,44.4 57.2,44.4 h 8.8 v 59.2 c 0,3.2 2,6.4 4.8,8 1.2,0.4 2.4,0.8 4,0.8 2,0 3.6,-0.8 5.2,-2 l 85.6,-66 h 102.8 c 32.4,0 59.2,-26.4 59.2,-59.2 v -98 c 0,-28 -19.6,-51.6 -46,-57.6 z M 44,125.2 v 94 C 28.4,213.2 17.6,198 17.6,180.4 v -98 c 0,-22.8 18.8,-41.6 41.6,-41.6 h 211.6 c 16.8,0 31.6,10.4 38,25.2 H 103.2 C 70.8,66 44,92.4 44,125.2 Z m 312.4,98 H 356 c 0,22.8 -18.8,41.6 -41.6,41.6 H 208.8 c -2,0 -4,0.8 -5.2,2 l -74,57.2 v -50.4 c 0,-4.8 -4,-8.8 -8.8,-8.8 H 103.2 C 80.4,264.8 61.6,246 61.6,223.2 v -98 c 0,-22.8 18.8,-41.6 41.6,-41.6 h 211.6 c 22.8,0 41.6,18.8 41.6,41.6 z"
id="path2" />
<path
d="m 298.8,122.4 h -180 c -4.8,0 -8.8,4 -8.8,8.8 0,4.8 4,8.8 8.8,8.8 h 180 c 4.8,0 8.8,-4 8.8,-8.8 0,-4.8 -4,-8.8 -8.8,-8.8 z"
id="path4" />
<path
d="m 298.8,160.8 h -180 c -4.8,0 -8.8,4 -8.8,8.8 0,4.8 4,8.8 8.8,8.8 h 180 c 4.8,0 8.8,-4 8.8,-8.8 0,-4.8 -4,-8.8 -8.8,-8.8 z"
id="path6" />
<path
d="m 298.8,199.6 h -180 c -4.8,0 -8.8,4 -8.8,8.8 0,4.8 4,8.8 8.8,8.8 h 180 c 4.8,0 8.8,-4 8.8,-8.8 0,-5.2 -4,-8.8 -8.8,-8.8 z"
id="path8" />
</g>
</g>
</g>
</g>
</svg>

Related

How to make pendulum swing due to gravity in Drake

I have been trying to simulate a simple pendulum that can swing due to gravity after setting the initial angle. I am now able to create the urdf, and create a slider that will set the angle of the pendulum arm. But I am still facing trouble when trying to get the pendulum to move. I have been basing my code on the code present in the "Running a simple simulation" section in https://deepnote.com/project/Authoring-a-Multibody-Simulation-jnoKyVLkS5CYUgHG3ASsBA/%2Fauthor_multibody_sim.ipynb.
This is the code I have so far:
import os
from tempfile import mkdtemp
from pydrake.all import (
AddMultibodyPlantSceneGraph,
DiagramBuilder,
Meshcat,
MeshcatVisualizerCpp,
Parser,
Simulator,
)
from manipulation.meshcat_cpp_utils import (
StartMeshcat, MeshcatJointSlidersThatPublish)
meshcat = StartMeshcat("https://b8cf4725-e938-4907-9172-f08ccc4873ab.deepnoteproject.com")
tmp_dir = mkdtemp()
model_file = os.path.join(tmp_dir, "test_model.urdf")
model_text = f"""\
<?xml version="1.0"?>
<robot name="materials">
<material name="blue">
<color rgba="0 0 0.8 1"/>
</material>
<material name="white">
<color rgba="1 1 1 1"/>
</material>
<material name="green">
<color rgba="0.0 0.8 0.0 1.0"/>
</material>
<joint name="world_2_base" type="fixed">
<parent link="world"/>
<child link="base"/>
<origin xyz="0 0 0.5"/>
</joint>
<link name="base">
<visual>
<geometry>
<box size="0.5 0.5 0.1"/>
</geometry>
</visual>
<inertial>
<mass value="1"/>
</inertial>
</link>
<joint name="base" type="revolute">
<parent link="base"/>
<child link="arm"/>
<axis xyz="0 1 0"/>
<origin xyz="0 0 -0.05"/>
</joint>
<link name="arm">
<visual>
<geometry>
<cylinder length="0.5" radius="0.01"/>
</geometry>
<material name="blue"/>
<origin xyz="0 0 -0.25"/>
</visual>
<inertial>
<mass value="1"/>
</inertial>
</link>
<joint name="base2" type="fixed">
<parent link="arm"/>
<child link="ball"/>
<origin xyz="0 0 -0.5"/>
</joint>
<link name="ball">
<visual>
<geometry>
<sphere radius="0.1"/>
</geometry>
<material name="green"/>
<origin xyz="0 0 -0.01"/>
</visual>
<inertial>
<mass value="10"/>
</inertial>
</link>
</robot>
"""
# Write temporary file.
with open(model_file, "w") as f:
f.write(model_text)
builder = DiagramBuilder()
plant, scene_graph = AddMultibodyPlantSceneGraph(builder, time_step=0.0001)
# Add pendulum model.
model = Parser(plant, scene_graph).AddModelFromFile(model_file)
# - Weld base at origin.
base_link = plant.GetBodyByName("base", model)
#plant.WeldFrames(plant.world_frame(), base_link.body_frame())
plant.Finalize()
#visualizer = MeshcatVisualizerCpp.AddToBuilder(builder, scene_graph, meshcat)
visualizer = MeshcatVisualizerCpp.AddToBuilder(builder, scene_graph,
meshcat)
diagram = builder.Build()
context = diagram.CreateDefaultContext()
sliders = MeshcatJointSlidersThatPublish(meshcat, plant, visualizer, context)
pend = plant.GetBodyByName(f"base", model)
def pose_callback(context):
pose = plant.EvalBodyPoseInWorld(context, pend)
sliders.Run(pose_callback)
simulator = Simulator(diagram)
simulator.Initialize()
simulator.set_target_realtime_rate(1.0)
#visualizer.StartRecording()
simulator.AdvanceTo(5.0)
#visualizer.PublishRecording()
simulator.AdvanceTo(5.0)
Please let me know what I am doing wrong. Thank you very much

You'd need to specify a non-zero initial angle in the joint between the base and the arm to observe anything interesting. One way of doing this is
builder = DiagramBuilder()
plant, scene_graph = AddMultibodyPlantSceneGraph(builder, time_step=0.01)
# Add pendulum model.
model = Parser(plant, scene_graph).AddModelFromFile(model_file)
plant.Finalize()
joint = plant.GetJointByName('base')
joint.set_default_angle(0.2)
visualizer = MeshcatVisualizerCpp.AddToBuilder(builder, scene_graph, meshcat,
MeshcatVisualizerParams(role=Role.kIllustration, prefix="visual"))
diagram = builder.Build()
simulator = Simulator(diagram)
simulator.Initialize()
simulator.set_target_realtime_rate(1.0)
visualizer.StartRecording()
simulator.AdvanceTo(5.0)
visualizer.PublishRecording()
To set the initial condition with the slider, try
builder = DiagramBuilder()
plant, scene_graph = AddMultibodyPlantSceneGraph(builder, time_step=0.01)
# Add pendulum model.
model = Parser(plant, scene_graph).AddModelFromFile(model_file)
plant.Finalize()
visualizer = MeshcatVisualizerCpp.AddToBuilder(builder, scene_graph, meshcat,
MeshcatVisualizerParams(role=Role.kIllustration, prefix="visual"))
diagram = builder.Build()
simulator = Simulator(diagram)
# Get context of the diagram being simulated.
context = simulator.get_mutable_context()
# Set initial condition of the joint.
joint_slider = MeshcatJointSliders(meshcat, plant, context)
joint_slider.Run(visualizer, context)
# Run the simulation and record.
simulator.Initialize()
simulator.set_target_realtime_rate(1.0)
visualizer.StartRecording()
simulator.AdvanceTo(5.0)
visualizer.PublishRecording()

Before finalizing the plant, could you try calling
plant.mutable_gravity_field().set_gravity_vector([0, 0, -9.8])
?

I think you need to fix the pendulum input port to zero, you can put
diagram.get_input_port(0).FixValue(context, [0.])
after creating "context".
This says "apply zero torque at the pendulum joint actuator". So the pendulum will swing passively.

URDF model keeps disappearing whenever I add intertial properties to a link? How can I resolve this issue?

I am trying to simulate a simple pendulum using pydrake and am having a couple of issues creating the urdf file to creat the model for the pendulum. I have no background knowledge on urdf or drake and am open to any suggestions to resolve this issue.
This is the code I have so far:
import os
from tempfile import mkdtemp
from pydrake.all import (
AddMultibodyPlantSceneGraph,
DiagramBuilder,
Meshcat,
MeshcatVisualizerCpp,
Parser,
Simulator,
)
from manipulation.meshcat_cpp_utils import (
StartMeshcat, MeshcatJointSlidersThatPublish)
# Start the visualizer.
meshcat = StartMeshcat()
tmp_dir = mkdtemp()
model_file = os.path.join(tmp_dir, "test_model.urdf")
model_text = f"""\
<?xml version="1.0"?>
<robot name="materials">
<material name="blue">
<color rgba="0 0 0.8 1"/>
</material>
<material name="white">
<color rgba="1 1 1 1"/>
</material>
<material name="green">
<color rgba="0.0 0.8 0.0 1.0"/>
</material>
<link name="base">
<visual>
<geometry>
<box size="0.5 0.5 0.1"/>
</geometry>
</visual>
<inertial>
<mass value="1"/>
</inertial>
</link>
<joint name="world_2_base" type="fixed">
<parent link="world"/>
<child link="base"/>
<origin xyz="0 0 0.5"/>
</joint>
<link name="arm">
<visual>
<geometry>
<cylinder length="0.5" radius="0.01"/>
</geometry>
<material name="blue"/>
</visual>
</link>
<joint name="base" type="revolute">
<parent link="base"/>
<child link="arm"/>
<axis xyz="1 0 0"/>
<origin xyz="0 0 -0.3"/>
</joint>
<link name="ball">
<visual>
<geometry>
<sphere radius="0.1"/>
</geometry>
<material name="green"/>
</visual>
</link>
<joint name="base2" type="fixed">
<parent link="arm"/>
<child link="ball"/>
<origin xyz="0 0 -0.35"/>
</joint>
</robot>
"""
# Write temporary file.
with open(model_file, "w") as f:
f.write(model_text)
builder = DiagramBuilder()
plant, scene_graph = AddMultibodyPlantSceneGraph(builder, time_step=0.0)
# Add pendulum model.
model = Parser(plant, scene_graph).AddModelFromFile(model_file)
# - Weld base at origin.
base_link = plant.GetBodyByName("base", model)
#plant.WeldFrames(plant.world_frame(), base_link.body_frame())
plant.Finalize()
visualizer = MeshcatVisualizerCpp.AddToBuilder(builder, scene_graph, meshcat)
diagram = builder.Build()
simulator = Simulator(diagram)
simulator.set_target_realtime_rate(1.0)
simulator.AdvanceTo(5.0)
This code gives me a blanck meshcat screen. But when I remove the inertia tags in the base link I can see a model of the pendulum. Please let me know what I am doing wrong. Also if you can reccomend some resources to learn about urdf and drake that would be really helpful.
Thank you very much.

I believe that the problem is that you have no mass in the arm, so when you go to simulate it, the simulation is ill-defined (probably you get NaNs in the state variables).
If you want to check just the visualization, I'd recommend doing
context = diagram.CreateDefaultContext()
diagram.Publish(context)
instead of the simulator step.
I have started working on a proper tutorial for precisely this. It's very much a draft right now, but in case it helps you can find it here. I intend for this to be one of the real Drake tutorials soon.

Modifying SVG files flutter

I have an svg file of the human body with groups of traces made for each muscle. I'd like to make a function that highlights certain muscles. Using regex is not the right way to go. I tried using xml but I'm not sure how to do it the right way and I'm not sure if xml truly is the right way.
This is the structure of my svg file:
<svg>
<g id="Muscles" transform="translate(-0.146 0.364)">
<g id="Abdominals">
<path id="path196" d="M3294.281-2851.382c-15.892,20.521-35.62,44.154-48.66,64.122,0,0,31.81-113.859-15.028-518.839,0,0,65.728,78.144,94.49,251.4,0,0,10.452,150.03-30.8,203.315" transform="translate(-1825.079 4663.033)" fill="#95999f"/>
<path id="path234" d="M3671.994-2915.5c15.893,20.542,35.6,44.178,48.659,64.119,0,0-23.994-49.737,22.844-454.717,0,0-65.7,78.144-94.491,251.4,0,0-18.265,85.908,22.988,139.2" transform="translate(-1494.489 4663.033)" fill="#95999f"/>
</g>
...
...
<g id="Triceps">
<path id="path198" d="M3172.882-3654.165s-144.517,96.743-129.823,251.042c14.692,154.272,59.807,225.4,10.234,308.571,0,0,127.978-21.957,152.021-141.282,24.066-119.325-28.764-221.175-32.433-418.331" transform="translate(-1975.527 4385.352)" fill="#95999f"/>
<path id="path236" d="M3832.757-3654.165s144.494,96.743,129.8,251.042c-14.694,154.272-59.806,225.4-10.236,308.571,0,0-127.952-21.957-152.02-141.282s28.787-221.175,32.456-418.331" transform="translate(-1375.567 4385.352)" fill="#95999f"/>
</g>
</g>
</svg>
I'm trying to change the color of a given muscles.

Can you do that:
let abd = document.getElementById("Abdominals").getElementsByTagName("path")
for (let path of abd) {
path.setAttribute("fill", "red");
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="1066.48291015625 731.18701171875 1521.556640625 1144.586181640625" version="1.1" >
<g id="Muscles" transform="translate(-0.146 0.364)">
<g id="Abdominals">
<path id="path196" d="M3294.281-2851.382c-15.892,20.521-35.62,44.154-48.66,64.122,0,0,31.81-113.859-15.028-518.839,0,0,65.728,78.144,94.49,251.4,0,0,10.452,150.03-30.8,203.315" transform="translate(-1825.079 4663.033)" fill="#95999f"/>
<path id="path234" d="M3671.994-2915.5c15.893,20.542,35.6,44.178,48.659,64.119,0,0-23.994-49.737,22.844-454.717,0,0-65.7,78.144-94.491,251.4,0,0-18.265,85.908,22.988,139.2" transform="translate(-1494.489 4663.033)" fill="#95999f"/>
</g>
<g id="Triceps">
<path id="path198" d="M3172.882-3654.165s-144.517,96.743-129.823,251.042c14.692,154.272,59.807,225.4,10.234,308.571,0,0,127.978-21.957,152.021-141.282,24.066-119.325-28.764-221.175-32.433-418.331" transform="translate(-1975.527 4385.352)" fill="#95999f"/>
<path id="path236" d="M3832.757-3654.165s144.494,96.743,129.8,251.042c-14.694,154.272-59.806,225.4-10.236,308.571,0,0-127.952-21.957-152.02-141.282s28.787-221.175,32.456-418.331" transform="translate(-1375.567 4385.352)" fill="#95999f"/>
</g>
</g>
</svg>
It's the easiest way e.g. to get your path elements via their IDs and then change their attributes as usual. You don't have to change attributes of all path children elements of your groups since you retrieve their entire collection etc.

How to make a shape bigger relevant to its position - SVG

How can I make a shape, specifically a path bigger, relevant to its position. There is something called scale but it doesn't help me because it's based on x and y which makes the shape bigger relevant to the corner. I want the shape to be zoomed in, from where it's placed, from its center.
Edit: I don't have the positions of the shapes. I have the shapes with their d attribute but I don't know how to read the centers.
Any help would be appreciated.

Transformation commands in SVG transform attributes can be concatenated - they are after all only matrices. What you can do is first translate the object to the origin of the coordinate system, then scale it, and then translate it back.
Suppose the center of your element is at (20, 30) and you want to zoom by factor 2.5. This is executed right to left (read it as a matrix multiplication):
transform="translate(20, 30) scale(2.5) translate(-20, -30)"
You can also compute the transformation matrix yourself and write:
transform="matrix(2.5,0,0,2.5,-30,-45)"
The description of these matrices is here.
In theory, with CSS transforms it should be much easier to to this. Unfortunately, browser support is not what it should be.
The following example works in Chrome, but not in Firefox (see this bug for a squabble about what is the right behaviour), IE or Edge. Stand-alone renderers also probably will fail (I falsified with librsvg and Inkscape). The green duck should be half the size of the yellow one and have the same center:
path {
fill: none;
stroke: yellow;
}
#tr {
transform: scale(0.5);
transform-origin: 50% 50%;
transform-box: fill-box;
stroke: green;
}
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="250" viewBox="0 0 250 250">
<path d="M 80.1339,33.7725 A 5.6922,6.4401 10 0 1 84.6212,41.103 5.6922,6.4401 10 0 1 77.8974,46.4568 5.6922,6.4401 10 0 1 73.4101,39.1262 5.6922,6.4401 10 0 1 80.1339,33.7725 Z M 82.0104,33.2778 A 11.4192,8.81609 89.1419 0 1 89.2916,46.4615 11.4192,8.81609 89.1419 0 1 79.1684,55.7873 11.4192,8.81609 89.1419 0 1 71.8879,42.6048 11.4192,8.81609 89.1419 0 1 82.0104,33.2778 Z M 70.3671,75.3594 C 70.3671,75.3594 68.586,75.6931 67.6718,75.6488 66.3528,75.5858 65.0527,74.9422 63.7318,74.8554 59.5513,74.5845 55.4963,76.5847 51.338,75.751 49.2598,75.3338 46.915,74.5923 45.4932,72.8885 44.8341,72.1001 44.3774,70.8894 44.6455,69.9567 45.3964,67.3505 50.7912,65.0483 50.7912,65.0483 50.7912,65.0483 43.9322,61.4587 41.1061,58.7996 38.902,56.7243 36.8574,54.2568 35.6903,51.4657 34.9382,49.6678 34.0963,47.4509 34.8214,45.7744 38.1361,41.2573 43.6807,43.9856 48.4204,45.1849 50.2853,45.6599 52.1398,46.8724 53.9981,46.6994 56.7267,46.4454 58.9343,44.5042 61.1832,43.0426 63.0639,41.8215 66.407,38.8022 66.407,38.8022 66.407,38.8022 64.6497,42.5145 64.3908,44.5758 64.1223,46.7147 64.4954,48.9637 64.9058,51.1399 65.3999,53.7626 66.3032,56.3275 67.233,58.8573 68.3474,61.8899 70.6024,64.6149 71.1153,67.7638 71.5329,70.3313 70.3671,75.3594 70.3671,75.3594 Z M 92.0698,111.853 C 96.2371,106.866 102.147,102.36 108.753,101.964 118.689,101.368 127.519,112.44 137.557,113.607 146.856,114.686 164.63,109.061 164.63,109.061 164.63,109.061 162.709,125.647 158.397,132.099 153,140.178 144.607,146.556 135.357,149.419 127.645,151.807 118.626,151.276 110.573,148.601 103.65,146.302 96.4513,142.201 92.0379,136.07 89.1835,132.103 87.9619,126.816 88.1408,122.105 88.2839,118.339 89.7715,114.602 92.0698,111.853 Z M 59.2917,139.294 C 61.9445,152.369 70.7633,164.205 81.6223,170.584 100.669,181.776 125.118,181.36 145.114,176.023 160.645,171.877 176.151,163.182 185.972,150.351 176.606,158.799 164.621,164.73 152.614,167.936 132.62,173.272 108.172,173.689 89.1233,162.496 78.2648,156.116 70.8095,151.141 68.1586,138.066 66.9416,125.527 79.8773,92.7348 77.4125,94.0907 74.9457,95.445 56.1332,122.504 59.2917,139.294 Z M 65.8609,39.1294 C 70.807,28.9425 79.9895,21.2775 90.0829,19.1926 112.001,16.8358 127.033,28.7634 131.73,48.0754 133.639,55.9048 132.499,64.4111 129.685,71.5142 127.542,76.9213 118.907,84.7996 118.907,84.7996 L 113.696,88.961 C 113.696,88.961 124.423,86.1023 129.998,86.5796 137.334,87.207 144.159,92.3433 151.484,93.3861 153.944,93.7365 156.655,94.179 158.824,93.1744 162.32,91.5568 164.447,87.8071 166.49,84.4927 168.56,81.135 167.572,75.2572 170.993,73.3938 173.665,71.9378 177.805,72.9562 180.38,75.0348 188.826,81.8552 191.576,94.4359 193.393,105.027 195.625,118.046 196.35,132.764 190.351,143.692 181.279,160.216 163.201,171.195 145.113,176.024 125.117,181.361 100.67,181.776 81.6235,170.584 70.7644,164.204 61.9435,152.369 59.2917,139.294 V 139.294 C 57.7803,120.107 70.3787,106.356 76.2899,91.5133 77.2688,88.9676 78.3913,83.5238 78.3913,83.5238 74.9247,81.427 72.0301,78.643 69.6902,75.4715" />
<path id="tr" d="M 80.1339,33.7725 A 5.6922,6.4401 10 0 1 84.6212,41.103 5.6922,6.4401 10 0 1 77.8974,46.4568 5.6922,6.4401 10 0 1 73.4101,39.1262 5.6922,6.4401 10 0 1 80.1339,33.7725 Z M 82.0104,33.2778 A 11.4192,8.81609 89.1419 0 1 89.2916,46.4615 11.4192,8.81609 89.1419 0 1 79.1684,55.7873 11.4192,8.81609 89.1419 0 1 71.8879,42.6048 11.4192,8.81609 89.1419 0 1 82.0104,33.2778 Z M 70.3671,75.3594 C 70.3671,75.3594 68.586,75.6931 67.6718,75.6488 66.3528,75.5858 65.0527,74.9422 63.7318,74.8554 59.5513,74.5845 55.4963,76.5847 51.338,75.751 49.2598,75.3338 46.915,74.5923 45.4932,72.8885 44.8341,72.1001 44.3774,70.8894 44.6455,69.9567 45.3964,67.3505 50.7912,65.0483 50.7912,65.0483 50.7912,65.0483 43.9322,61.4587 41.1061,58.7996 38.902,56.7243 36.8574,54.2568 35.6903,51.4657 34.9382,49.6678 34.0963,47.4509 34.8214,45.7744 38.1361,41.2573 43.6807,43.9856 48.4204,45.1849 50.2853,45.6599 52.1398,46.8724 53.9981,46.6994 56.7267,46.4454 58.9343,44.5042 61.1832,43.0426 63.0639,41.8215 66.407,38.8022 66.407,38.8022 66.407,38.8022 64.6497,42.5145 64.3908,44.5758 64.1223,46.7147 64.4954,48.9637 64.9058,51.1399 65.3999,53.7626 66.3032,56.3275 67.233,58.8573 68.3474,61.8899 70.6024,64.6149 71.1153,67.7638 71.5329,70.3313 70.3671,75.3594 70.3671,75.3594 Z M 92.0698,111.853 C 96.2371,106.866 102.147,102.36 108.753,101.964 118.689,101.368 127.519,112.44 137.557,113.607 146.856,114.686 164.63,109.061 164.63,109.061 164.63,109.061 162.709,125.647 158.397,132.099 153,140.178 144.607,146.556 135.357,149.419 127.645,151.807 118.626,151.276 110.573,148.601 103.65,146.302 96.4513,142.201 92.0379,136.07 89.1835,132.103 87.9619,126.816 88.1408,122.105 88.2839,118.339 89.7715,114.602 92.0698,111.853 Z M 59.2917,139.294 C 61.9445,152.369 70.7633,164.205 81.6223,170.584 100.669,181.776 125.118,181.36 145.114,176.023 160.645,171.877 176.151,163.182 185.972,150.351 176.606,158.799 164.621,164.73 152.614,167.936 132.62,173.272 108.172,173.689 89.1233,162.496 78.2648,156.116 70.8095,151.141 68.1586,138.066 66.9416,125.527 79.8773,92.7348 77.4125,94.0907 74.9457,95.445 56.1332,122.504 59.2917,139.294 Z M 65.8609,39.1294 C 70.807,28.9425 79.9895,21.2775 90.0829,19.1926 112.001,16.8358 127.033,28.7634 131.73,48.0754 133.639,55.9048 132.499,64.4111 129.685,71.5142 127.542,76.9213 118.907,84.7996 118.907,84.7996 L 113.696,88.961 C 113.696,88.961 124.423,86.1023 129.998,86.5796 137.334,87.207 144.159,92.3433 151.484,93.3861 153.944,93.7365 156.655,94.179 158.824,93.1744 162.32,91.5568 164.447,87.8071 166.49,84.4927 168.56,81.135 167.572,75.2572 170.993,73.3938 173.665,71.9378 177.805,72.9562 180.38,75.0348 188.826,81.8552 191.576,94.4359 193.393,105.027 195.625,118.046 196.35,132.764 190.351,143.692 181.279,160.216 163.201,171.195 145.113,176.024 125.117,181.361 100.67,181.776 81.6235,170.584 70.7644,164.204 61.9435,152.369 59.2917,139.294 V 139.294 C 57.7803,120.107 70.3787,106.356 76.2899,91.5133 77.2688,88.9676 78.3913,83.5238 78.3913,83.5238 74.9247,81.427 72.0301,78.643 69.6902,75.4715" />
</svg>

Kendo Chart control won't render correct SVG in IE 10

I am testing out creating a SPA using the Kendo UI Pro suite. I have an issue currently with the Kendo UI Chart (in Donut mode). The chart's SVG does not properly render in IE 10. This issue does not appear to happen in IE 11 or Firefox.
JSFiddle Example: http://jsfiddle.net/m9vq7gu4/
In the View's Show event, I call to an ajax API and get the data:
$.ajax({
url: '/echo/json/',
data: {
json: JSON.stringify({
"TotalHours": Math.random() * 714,
"Budget": 714.6
}),
delay: 2
},
type: 'POST',
success: function (response) {
console.log(response);
var data = [{
value: response.TotalHours,
color: "red"
}, {
value: response.Budget - response.TotalHours,
color: "transparent"
}];
loadRadial(id, data);
}
});
I then kendoChart the div and refresh it.
var dsRadial = new kendo.data.DataSource({
data: data
});
dsRadial.read();
var radial = $("#" + id).kendoChart({
dataSource: dsRadial,
dataBound: function () {
console.log("dataBound");
},
legend: {
visible: false
},
seriesDefaults: {
type: "donut",
holeSize: 60,
size: 20
},
series: [{
field: "value",
colorField: "color"
}],
chartArea: {
background: "transparent"
},
tooltip: {
visible: true
}
}).data("kendoChart");
I show that all events down the View/Layout/Router fire correctly. At first I thought that the chart was not binding properly, but if I look at the source code of the page the SVG is created:
<svg xmlns="http://www.w3.org/2000/svg" style="left: 0px; top: -0.47px; width: 100%; height: 100%; overflow: hidden;" version="1.1"><defs><radialGradient id="5c7e3a1b-06a7-4665-bb46-44db26b308e7" gradientUnits="userSpaceOnUse" cx="409.5" cy="100" r="80"><stop style="stop-color: rgb(255, 255, 255); stop-opacity: 0;" offset="0.75" /><stop style="stop-color: rgb(255, 255, 255); stop-opacity: 0.3;" offset="0.875" /><stop style="stop-color: rgb(255, 255, 255); stop-opacity: 0;" offset="0.9975" /></radialGradient></defs><g><path fill="none" stroke="none" d="M 0 0 L 819 0 L 819 200 L 0 200 Z" /><path fill="none" stroke="none" d="M 5 5 L 814 5 L 814 195 L 5 195 Z" /><g><g /></g><g><g><g transform="matrix(1 0 0 1 0 0)"><path fill="red" stroke="none" d="M 409.5 20 C 428.398 20 447.219 26.963 461.567 39.263 C 475.915 51.563 485.673 69.099 488.56 87.775 C 491.448 106.452 487.443 126.115 477.48 142.174 C 467.517 158.233 451.679 170.556 433.663 176.264 L 427.622 157.198 C 441.134 152.917 453.013 143.675 460.485 131.631 C 467.957 119.587 470.961 104.839 468.795 90.831 C 466.629 76.824 459.311 63.672 448.55 54.447 C 437.789 45.222 423.674 40 409.5 40 Z" /><path fill="url(#5c7e3a1b-06a7-4665-bb46-44db26b308e7)" stroke="none" d="M 409.5 20 C 428.398 20 447.219 26.963 461.567 39.263 C 475.915 51.563 485.673 69.099 488.56 87.775 C 491.448 106.452 487.443 126.115 477.48 142.174 C 467.517 158.233 451.679 170.556 433.663 176.264 L 427.622 157.198 C 441.134 152.917 453.013 143.675 460.485 131.631 C 467.957 119.587 470.961 104.839 468.795 90.831 C 466.629 76.824 459.311 63.672 448.55 54.447 C 437.789 45.222 423.674 40 409.5 40 Z" /></g><g transform="matrix(1 0 0 1 0 0)"><path fill="none" stroke="none" d="M 433.663 176.264 C 416.13 181.819 396.674 181.079 379.614 174.208 C 362.554 167.337 348.016 154.387 339.227 138.231 C 330.437 122.076 327.462 102.835 330.961 84.779 C 334.461 66.723 344.408 49.987 358.597 38.284 C 372.785 26.582 391.108 20 409.5 20 L 409.5 40 C 395.706 40 381.964 44.936 371.322 53.713 C 360.681 62.49 353.22 75.043 350.596 88.584 C 347.972 102.126 350.203 116.557 356.795 128.674 C 363.387 140.79 374.291 150.503 387.086 155.656 C 399.881 160.809 414.473 161.364 427.622 157.198 Z" /><path fill="url(#5c7e3a1b-06a7-4665-bb46-44db26b308e7)" stroke="none" d="M 433.663 176.264 C 416.13 181.819 396.674 181.079 379.614 174.208 C 362.554 167.337 348.016 154.387 339.227 138.231 C 330.437 122.076 327.462 102.835 330.961 84.779 C 334.461 66.723 344.408 49.987 358.597 38.284 C 372.785 26.582 391.108 20 409.5 20 L 409.5 40 C 395.706 40 381.964 44.936 371.322 53.713 C 360.681 62.49 353.22 75.043 350.596 88.584 C 347.972 102.126 350.203 116.557 356.795 128.674 C 363.387 140.79 374.291 150.503 387.086 155.656 C 399.881 160.809 414.473 161.364 427.622 157.198 Z" /></g></g></g></g></svg>
What's really odd is that as soon as I switch the router over to the other page, the SVG displays properly until the data is changed again (you can see this by clicking the Home/Data links on the demo). What could be causing this other than a weird issue between Chart and View/Layout/Router?

This is a known issue with Kendo UI prior to versions 2013.2.1215 (an internal build).
It's caused by a glitch in the IE10 SVG implementation. Once a path is scaled to 0 it disappears even if the transformation is cleared.