I want to create a half transparent image with a empty rectangle at the middle like below:
How do I achieve this? Thanks
The easiest and more flexible way (it will allow you to use percentage or fix position and size) might just be to use 4 rectangle like this:
<Grid Opacity="0.5">
<Grid.RowDefinitions>
<RowDefinition Height="*"/>
<RowDefinition Height="150"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"/>
<ColumnDefinition Width="250"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<Rectangle Fill="Black" Grid.ColumnSpan="3"/>
<Rectangle Fill="Black" Grid.Row="1"/>
<Rectangle Fill="Black" Grid.Row="2" Grid.ColumnSpan="3"/>
<Rectangle Fill="Black" Grid.Row="1" Grid.Column="2"/>
</Grid>
or you could use a Path Geometry:
<Path StrokeThickness="0" Fill="Black" Opacity=".5" >
<Path.Data>
<GeometryGroup FillRule="EvenOdd">
<RectangleGeometry Rect="50,50,100,100" />
<RectangleGeometry Rect="0,0,300,200" />
</GeometryGroup>
</Path.Data>
</Path>
Related
I have this robot arm which came with a URDF file and some STL files. The URDF file includes all of the revolute joints but it does not include a joint for the gripper.
I'm trying to figure out how to add the gripper to the URDF so I can simulate it, but I am having a tough time since I've never done this before.
The last link/joint of the URDF look like this:
<link name="link5">
<visual>
<origin
xyz="0 0 -0.11"
rpy="0 0 0"/>
<geometry>
<mesh
filename="package://dofbot_info/meshes/link5.STL"/>
</geometry>
<material
name="">
<color
rgba="1 1 1 1"/>
</material>
</visual>
<collision>
<origin
xyz="0 0 0"
rpy="0 0 0"/>
<geometry>
<mesh
filename="package://dofbot_info/meshes/link5.STL"/>
</geometry>
</collision>
</link>
<joint name="joint5" type="revolute">
<origin
xyz="-0.18385 -0.00215 -0.000605"
rpy="0 -1.5708 0"/>
<parent
link="link4"/>
<child
link="link5"/>
<axis
xyz="0 0 1"/>
<limit
lower="-1.5708"
upper="3.1416"
effort="100"
velocity="1"/>
</joint>
If I want this gripper to open and close in RViz, could I do so with the current mesh/STL? If not, how would I re-build a moveable gripper with basic shapes like rectangles in the URDF?
Here is a closeup link-5 stl:
As I wrote in the comments, here is a way to create a simplified model, from that you would need to create a ROS Node to publish the joint_states in a way that would mimic the motion of your gripper
EDIT:
Seems that someone has already done it for you
I'd like to convert this SVG to PDF with the size scaled up to x10 of it's current size without losing the quality of the picture. The PDF should also be in 300 PPI. How can I achieve kind of output?
<?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">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="248.1" height="350.7" viewBox="0 0 248.1 350.7" xml:space="preserve">
<desc>Created with Fabric.js 1.7.19</desc>
<defs>
</defs>
<g transform="translate(51.2 34.1) scale(0.1 0.1)">
<image xlink:href="./cat.jpg" x="-512" y="-341" style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" width="1024" height="682" preserveAspectRatio="none"></image>
</g>
</svg>
This SVG came from fabricjs toSVG() code. I can resize it using fabricjs, but I'd like to know is it possible to do this and how using ImageMagick.
ImageMagick is a programm suite aimed at raster images. What you have is a format that mixes vector and raster content both for input and output.
ImageMagick can handle that, but only through additional programs that need to be installed:
import from SVG with Inkscape or librsvg
export to PDF with ghostscript
You can cutout the middleman. Inkscape, while being mainly a SVG editor GUI, also has a commandline mode, for example for export tasks. You can scale the SVG by multiplying the height and width values on the root element with your scale - do not change the viewBox attribute:
<svg width="2481" height="3507" viewBox="0 0 248.1 350.7" ...>
Or, if you know the target size of the pages you want, you can set them. Even if aspect ratio does not fit, your content will sized-to-fit on the page. For example with a A4 page:
<svg width="210mm" height="297mm" viewBox="0 0 248.1 350.7" ...>
Then execute Inkscape:
inkscape --without-gui --export-pdf=out.pdf in.svg
Pictures are embeded as-is, so you do not loose resolution.
I've been experimenting with SVG filters, but can't figure out how to fix this: I have an SVG that uses filter effects like feBlend:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="70 0 360 360">
<defs>
<path id="orange" d="M200,50 a35 35 0 0 1 100 0 l0 70 a40 40 0 0 1 -100 0 z" fill="rgb(252,170,30)"></path>
<path id="yellow" transform="rotate(45 250 185)" d="M200,50 a35 35 0 0 1 100 0 l0 70 a35 35 0 0 1 -100 0 z" fill="rgb(242,229,0)">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 250 180" to="45 250 180" dur="1.5s" additive="replace" fill="freeze"/>
</path>
…
<filter id="blendit">
<feImage xlink:href="#orange" x="0" y="0" result="1"/>
<feImage xlink:href="#yellow" x="0" y="0" result="2"/>
…
<feBlend mode="multiply" in="1" in2="2" result="12"/>
<feBlend mode="multiply" in="12" in2="3" result="123"/>
…
</filter>
</defs>
<rect x="0" y="0" width="500" height="500" filter="url(#blendit)"/>
</svg>
When included on the page as inline SVG, the graphic displays sharp on an iOS retina screen.
However, if I try to use it as a source for an <img> tag:
<img src='svg-with-filters.svg'/>
The graphic appears fuzzy, as if it was an #1x resource on the retina screen.
How do I force the graphic to appear sharp on iOS, without resorting to inline SVG or an <object> tag? It renders correctly on desktop Chrome and on Android devices.
Example
Here's a CodePen that demonstrates the problem, and a screenshot below.
i want to know the position of the chart when i move the scrollbar in the highchart . is there any scrollbar event associated in highchart .Please help .
The Highcharts API does not show any event handling options for the scrollbar.
Let's take a look at the code in their example. Here is the SVG that renders the scrollbar itself.
<g class="highcharts-scrollbar" transform="translate(10,372)">
<rect x="0" y="-0.5" fill="white" stroke="silver" stroke-width="1"
rx="7" ry="7" height="14" width="580"></rect>
<rect y="0" height="14" fill="gray" rx="7" ry="7" x="358"
width="18"></rect>
<path fill="none" stroke="yellow" stroke-width="1"
visibility="visible"
d="M 363.5 3.5 L 363.5 9.333333333333334 M 366.5 3.5 L 366.5 9.333333333333334 M 369.5 3.5 L 369.5 9.333333333333334"></path>
<g>
<rect x="-1" y="-1" width="15" height="15" strokeWidth="0" rx="7" ry="7" fill="gray"></rect>
<path fill="yellow" d="M 8 4 L 8 10 5 7"></path>
</g>
<g transform="translate(566,0)">
<rect x="-1" y="-1" width="15" height="15" strokeWidth="0" rx="7" ry="7" fill="gray"></rect>
<path fill="yellow" d="M 6 4 L 6 10 9 7"></path>
</g>
</g>
The scrollbar position is the 2nd <rect> tag. You can use jQuery to retrieve the value of attribute x. In the example code, the position of x = 358 out of the maximum 580 space (the '' with which filling).
The following issue happens in Firefox 20.0.1 and IE10, but works in Chrome.
When I test a highchart plot in Firefox 20.0.1 or IE10, the chart series is invisible. After looking into the chart html, I found the clipPath in the SVG is not set correctly.
There are 4 "clipPath" defined in the "defs" section, as follows:
`
<defs>
<clipPath id="highcharts-1">
<rect height="110" width="9999" y="0" x="0" fill="none" ry="0" rx="0"></rect>
</clipPath>
<clipPath id="highcharts-2">
<rect height="0" width="1228" y="0" x="0" fill="none"></rect>
</clipPath>
<clipPath id="highcharts-14">
<rect height="0" width="0" y="0" x="0" fill="none"></rect>
</clipPath>
<clipPath id="highcharts-15">
<rect height="110" width="99" y="-40" x="-99" fill="none" ry="0" rx="0"></rect>
</clipPath>
</defs>
`
In the "highcharts-series" "g" tag, it uses "clip-path="url(#highcharts-14)"". Which causes the chart series invisible. If I manually change the clip-path to url(#highcharts-2), chart shows up.
Since I didn't set any clipPath related options in the highchart, why the "highcharts-14" and "highcharts-15" get defined and used? How to fix this issue?
Thanks,