Clipping in DrawingML

Question

I am creating Word DOCX files with embedded vector graphics. Apparently DrawingML is now the preferred way of inserting vector graphics. I am having trouble working out how to clip a diagram within the drawing canvas. It seems to keep scaling my shapes within the group shape.

Is clipping possible in DrawingML, and if so, does anyone have a wee snippet of code or XML to point me in the right direction?

Answer 1

Cropping in DrawingML is from the <scrRect/> tag. If it is anything but empty, it means it is cropped. This tag is used for all visual graphics, such as images, shapes, charts, etc.

Take these two examples of an .EMF inserted in Word:

    <w:drawing>
      <wp:inline distT="0" distB="0" distL="0" distR="0">
        <wp:extent cx="5934456" cy="7269480"/>
        <wp:effectExtent l="0" t="0" r="9525" b="7620"/>
        <wp:docPr id="1" name="Picture 1" descr="C:\Users\Todd\Pictures\Dotted_Lines.emf"/>
        <wp:cNvGraphicFramePr>
          <a:graphicFrameLocks xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" noChangeAspect="1"/>
        </wp:cNvGraphicFramePr>
        <a:graphic xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main">
          <a:graphicData uri="http://schemas.openxmlformats.org/drawingml/2006/picture">
            <pic:pic xmlns:pic="http://schemas.openxmlformats.org/drawingml/2006/picture">
              <pic:nvPicPr>
                <pic:cNvPr id="0" name="Picture 1" descr="C:\Users\Todd\Pictures\Dotted_Lines.emf"/>
                <pic:cNvPicPr>
                  <a:picLocks noChangeAspect="1" noChangeArrowheads="1"/>
                </pic:cNvPicPr>
              </pic:nvPicPr>
              <pic:blipFill>
                <a:blip r:embed="rId5">
                  <a:extLst>
                    <a:ext uri="{28A0092B-C50C-407E-A947-70E740481C1C}">
                      <a14:useLocalDpi xmlns:a14="http://schemas.microsoft.com/office/drawing/2010/main" val="0"/>
                    </a:ext>
                  </a:extLst>
                </a:blip>
                <a:srcRect/>
                <a:stretch>
                  <a:fillRect/>
                </a:stretch>
              </pic:blipFill>
              <pic:spPr bwMode="auto">
                <a:xfrm>
                  <a:off x="0" y="0"/>
                  <a:ext cx="5934456" cy="7269480"/>
                </a:xfrm>
                <a:prstGeom prst="rect">
                  <a:avLst/>
                </a:prstGeom>
                <a:noFill/>
                <a:ln>
                  <a:noFill/>
                </a:ln>
              </pic:spPr>
            </pic:pic>
          </a:graphicData>
        </a:graphic>
      </wp:inline>
    </w:drawing>

and

<w:drawing>
          <wp:inline distT="0" distB="0" distL="0" distR="0" wp14:anchorId="779C87CB" wp14:editId="4B126F88">
            <wp:extent cx="3390181" cy="4882551"/>
            <wp:effectExtent l="0" t="0" r="1270" b="0"/>
            <wp:docPr id="2" name="Picture 2" descr="C:\Users\Todd\Pictures\Dotted_Lines.emf"/>
            <wp:cNvGraphicFramePr>
              <a:graphicFrameLocks xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" noChangeAspect="1"/>
            </wp:cNvGraphicFramePr>
            <a:graphic xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main">
              <a:graphicData uri="http://schemas.openxmlformats.org/drawingml/2006/picture">
                <pic:pic xmlns:pic="http://schemas.openxmlformats.org/drawingml/2006/picture">
                  <pic:nvPicPr>
                    <pic:cNvPr id="0" name="Picture 1" descr="C:\Users\Todd\Pictures\Dotted_Lines.emf"/>
                    <pic:cNvPicPr>
                      <a:picLocks noChangeAspect="1" noChangeArrowheads="1"/>
                    </pic:cNvPicPr>
                  </pic:nvPicPr>
                  <pic:blipFill rotWithShape="1">
                    <a:blip r:embed="rId5">
                      <a:extLst>
                        <a:ext uri="{28A0092B-C50C-407E-A947-70E740481C1C}">
                          <a14:useLocalDpi xmlns:a14="http://schemas.microsoft.com/office/drawing/2010/main" val="0"/>
                        </a:ext>
                      </a:extLst>
                    </a:blip>
                    <a:srcRect l="23111" r="19768" b="32841"/>
                    <a:stretch/>
                  </pic:blipFill>
                  <pic:spPr bwMode="auto">
                    <a:xfrm>
                      <a:off x="0" y="0"/>
                      <a:ext cx="3389885" cy="4882125"/>
                    </a:xfrm>
                    <a:prstGeom prst="rect">
                      <a:avLst/>
                    </a:prstGeom>
                    <a:noFill/>
                    <a:ln>
                      <a:noFill/>
                    </a:ln>
                    <a:extLst>
                      <a:ext uri="{53640926-AAD7-44D8-BBD7-CCE9431645EC}">
                        <a14:shadowObscured xmlns:a14="http://schemas.microsoft.com/office/drawing/2010/main"/>
                      </a:ext>
                    </a:extLst>
                  </pic:spPr>
                </pic:pic>
              </a:graphicData>
            </a:graphic>
          </wp:inline>
        </w:drawing>

Note that they are the same, except for the line <a:srcRect l="23111" r="19768" b="32841"/> in the second one. What this means is that the source rectangle (i.e. the image's dimensions) is cut/clipped/cropped by 23.111% off the left, 19.768% off the right and 32.841% off the bottom. The top has not been cropped.