Skip to content

Instantly share code, notes, and snippets.

@IvanaGyro

IvanaGyro/Issue about selecting SVG.POWERPOINT.yaml

Created February 21, 2023 15:35
Show Gist options
  • Save IvanaGyro/941ebf2de2ddd1a04b5cbfde7a32407f to your computer and use it in GitHub Desktop.
Save IvanaGyro/941ebf2de2ddd1a04b5cbfde7a32407f to your computer and use it in GitHub Desktop.
Download ZIP
Demo the issue about selecting SVG.
Raw
Issue about selecting SVG.POWERPOINT.yaml
name: Issue about selecting SVG
description: Demo the issue about selecting SVG.
host: POWERPOINT
api_set: {}
script:
content: >+
$("#run").click(() => tryCatch(run));
const run: Function = async () => {
Office.context.document.getSelectedDataAsync(Office.CoercionType.XmlSvg, {}, (asyncResult) => {
if (asyncResult.status === Office.AsyncResultStatus.Failed) {
console.error(asyncResult);
} else {
console.log(asyncResult);
}
});
};
/** Default helper for invoking an action and handling errors. */
const tryCatch: (callback: Function) => void = async (callback: Function) =>
{
try {
await callback();
} catch (error) {
// Note: In a production add-in, you'd want to notify the user through your add-in's UI.
console.error(error);
}
};
$("#insert").click(newImage);
function newImage() {
Office.context.document.setSelectedDataAsync(
getImageAsBase64String(),
{
coercionType: Office.CoercionType.XmlSvg,
imageLeft: 50,
imageTop: 50,
imageWidth: 400
},
function (asyncResult) {
if (asyncResult.status === Office.AsyncResultStatus.Failed) {
console.error(asyncResult.error.message);
}
}
);
}
function getImageAsBase64String() {
// A production add-in code could get an image from an
// online source and pass it to a library function that
// converts to base 64.
const svg =
'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 100 100"> <title>SVG Logo</title> <a xlink:href="http://www.w3.org/Graphics/SVG/" target="_parent" xlink:title="W3C SVG Working Group home page"> <rect id="background" fill="#FF9900" width="100" height="100" rx="4" ry="4"/> <rect id="top-left" fill="#FFB13B" width="50" height="50" rx="4" ry="4"/> <rect id="bottom-right" x="50" y="50" fill="#DE8500" width="50" height="50" rx="4" ry="4"/> <g id="circles" fill="#FF9900"> <circle id="n" cx="50" cy="18.4" r="18.4"/> <circle id="ne" cx="72.4" cy="27.6" r="18.4"/> <circle id="e" cx="81.6" cy="50" r="18.4"/> <circle id="se" cx="72.4" cy="72.4" r="18.4"/> <circle id="s" cx="50" cy="81.6" r="18.4"/> <circle id="sw" cx="27.6" cy="72.4" r="18.4"/> <circle id="w" cx="18.4" cy="50" r="18.4"/> <circle id="nw" cx="27.6" cy="27.6" r="18.4"/> </g> <g id="stars"> <path id="black-star" d="M 63.086, 18.385 c 0.000, -7.227 -5.859,-13.086 -13.100,-13.086 c -7.235, 0.000 -13.096, 5.859 -13.096, 13.086 c -5.100, -5.110 -13.395, -5.110 -18.497, 0.000 c -5.119, 5.120 -5.119, 13.408 0.000, 18.524 c -7.234, 0.000 -13.103, 5.859 -13.103, 13.085 c 0.000, 7.230 5.870, 13.098 13.103, 13.098 c -5.119, 5.110 -5.119, 13.395 0.000, 18.515 c 5.102, 5.104 13.397, 5.104 18.497, 0.000 c 0.000, 7.228 5.860, 13.083 13.096, 13.083 c 7.240, 0.000 13.100, -5.855 13.100,-13.083 c 5.118, 5.104 13.416, 5.104 18.513, 0.000 c 5.101, -5.120 5.101,-13.410 0.000,-18.515 c 7.216, 0.000 13.081, -5.869 13.081,-13.098 c 0.000, -7.227 -5.865,-13.085 -13.081,-13.085 c 5.101, -5.119 5.101,-13.406 0.000,-18.524 C 76.502, 13.275 68.206, 13.275 63.086, 18.385 z"/> <path id="white-star" fill="#FFFFFF" d="M 55.003, 23.405 v 14.488 L 65.260, 27.640 c 0.000, -1.812 0.691,-3.618 2.066, -5.005 c 2.780, -2.771 7.275,-2.771 10.024, 0.000 c 2.771, 2.766 2.771, 7.255 0.000, 10.027 c -1.377, 1.375 -3.195, 2.072 -5.015, 2.072 L 62.101, 44.982 H 76.590 c 1.290, -1.280 3.054,-2.076 5.011, -2.076 c 3.900, 0.000 7.078, 3.179 7.078, 7.087 c 0.000, 3.906 -3.178, 7.088 -7.078, 7.088 c -1.957, 0.000 -3.721,-0.798 -5.011, -2.072 H 62.100 l 10.229, 10.244 c 1.824, 0.000 3.642, 0.694 5.015, 2.086 c 2.774, 2.759 2.774, 7.250 0.000, 10.010 c -2.750, 2.774 -7.239, 2.774 -10.025, 0.000 c -1.372, -1.372 -2.064,-3.192 -2.064, -5.003 L 55.000, 62.094 v 14.499 c 1.271, 1.276 2.084, 3.054 2.084, 5.013 c 0.000, 3.906 -3.177, 7.077 -7.098, 7.077 c -3.919, 0.000 -7.094,-3.167 -7.094, -7.077 c 0.000, -1.959 0.811,-3.732 2.081, -5.013 V 62.094 L 34.738, 72.346 c 0.000, 1.812 -0.705, 3.627 -2.084, 5.003 c -2.769, 2.772 -7.251, 2.772 -10.024, 0.000 c -2.775, -2.764 -2.775,-7.253 0.000,-10.012 c 1.377, -1.390 3.214,-2.086 5.012, -2.086 l 10.257,-10.242 H 23.414 c -1.289, 1.276 -3.072, 2.072 -5.015, 2.072 c -3.917, 0.000 -7.096,-3.180 -7.096, -7.088 s 3.177, -7.087 7.096,-7.087 c 1.940, 0.000 3.725, 0.796 5.015, 2.076 h 14.488 L 27.646, 34.736 c -1.797, 0.000 -3.632,-0.697 -5.012, -2.071 c -2.775, -2.772 -2.775,-7.260 0.000,-10.027 c 2.773, -2.771 7.256,-2.771 10.027, 0.000 c 1.375, 1.386 2.083, 3.195 2.083, 5.005 l 10.235, 10.252 V 23.407 c -1.270, -1.287 -2.082,-3.053 -2.082, -5.023 c 0.000, -3.908 3.175,-7.079 7.096, -7.079 c 3.919, 0.000 7.097, 3.168 7.097, 7.079 C 57.088, 20.356 56.274,22.119 55.003, 23.405 z"/> </g> <g id="svg-textbox"> <path id="text-backdrop" fill="black" d="M 5.30,50.00 H 94.68 V 90.00 Q 94.68,95.00 89.68,95.00 H 10.30 Q 5.30,95.00 5.30,90.00 Z"/> <path id="shine" fill="#3F3F3F" d="M 14.657,54.211 h 71.394 c 2.908, 0.000 5.312, 2.385 5.312, 5.315 v 17.910 c -27.584,-3.403 -54.926,-8.125 -82.011,-7.683 V 59.526 C 9.353,56.596 11.743,54.211 14.657,54.211 L 14.657,54.211 z"/> <g id="svg-text"> <title>SVG</title> <path id="S" fill="#FFFFFF" stroke="#000000" stroke-width="0.5035" d="M 18.312,72.927 c -2.103,-2.107 -3.407, -5.028 -3.407, -8.253 c 0.000,-6.445 5.223,-11.672 11.666,-11.672 c 6.446, 0.000 11.667, 5.225 11.667, 11.672 h -6.832 c 0.000,-2.674 -2.168, -4.837 -4.835, -4.837 c -2.663, 0.000 -4.838, 2.163 -4.838, 4.837 c 0.000, 1.338 0.549, 2.536 1.415, 3.420 l 0.000, 0.000 c 0.883, 0.874 2.101, 1.405 3.423, 1.405 v 0.012 c 3.232, 0.000 6.145, 1.309 8.243, 3.416 l 0.000, 0.000 c 2.118, 2.111 3.424, 5.034 3.424, 8.248 c 0.000, 6.454 -5.221, 11.680 -11.667, 11.680 c -6.442, 0.000 -11.666, -5.222 -11.666,-11.680 h 6.828 c 0.000, 2.679 2.175, 4.835 4.838, 4.835 c 2.667, 0.000 4.835, -2.156 4.835, -4.835 c 0.000,-1.329 -0.545, -2.527 -1.429, -3.407 l 0.000, 0.000 c -0.864,-0.880 -2.082, -1.418 -3.406, -1.418 l 0.000, 0.000 C 23.341,76.350 20.429, 75.036 18.312, 72.927 L 18.312,72.927 L 18.312,72.927 z"/> <polygon id="V" fill="#FFFFFF" stroke="#000000" stroke-width="0.5035" points="61.588,53.005 53.344,92.854 46.494,92.854 38.236,53.005 45.082,53.005 49.920,76.342 54.755,53.005"/> <path id="G" fill="#FFFFFF" stroke="#000000" stroke-width="0.5035" d="M 73.255,69.513 h 11.683 v 11.664 l 0.000, 0.000 c 0.000, 6.452 -5.226,11.678 -11.669, 11.678 c -6.441, 0.000 -11.666,-5.226 -11.666,-11.678 l 0.000, 0.000 V 64.676 h -0.017 C 61.586,58.229 66.827,53.000 73.253, 53.000 c 6.459, 0.000 11.683, 5.225 11.683, 11.676 h -6.849 c 0.000,-2.674 -2.152,-4.837 -4.834, -4.837 c -2.647, 0.000 -4.820, 2.163 -4.820, 4.837 v 16.501 l 0.000, 0.000 c 0.000, 2.675 2.173, 4.837 4.820, 4.837 c 2.682, 0.000 4.834,-2.162 4.834, -4.827 v -0.012 v -4.827 h -4.834 L 73.255,69.513 L 73.255,69.513 z"/> </g> </g> </a></svg>';
return svg;
}
language: typescript
template:
content: |-
<button id="insert" class="ms-Button">
<span class="ms-Button-label">Setup</span>
</button>
<button id="run" class="ms-Button">
<span class="ms-Button-label">Show Selection</span>
</button>
language: html
style:
content: |-
section.samples {
margin-top: 20px;
}
section.samples .ms-Button, section.setup .ms-Button {
display: block;
margin-bottom: 5px;
margin-left: 20px;
min-width: 80px;
}
language: css
libraries: |
https://appsforoffice.microsoft.com/lib/1/hosted/office.js
@types/office-js
office-ui-fabric-js@1.4.0/dist/css/fabric.min.css
office-ui-fabric-js@1.4.0/dist/css/fabric.components.min.css
core-js@2.4.1/client/core.min.js
@types/core-js
jquery@3.1.1
@types/jquery@3.3.1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment