0

fill="url(#mobile)"不使用参考<pattern id="mobile" patternUnits="userSpaceOnUse" width="100%" height="100%"><image xlink:href="http://placehold.it/52.83x69.15" width="22.89" height="35.52" x="123" y="90" /></pattern>

<svg viewBox="0 0 198 138" xmlns="http://www.w3.org/2000/svg">
  <!-- <svg width="198" height="138" viewBox="0 0 198 138" xmlns="http://www.w3.org/2000/svg"> -->
  <defs>
    <pattern id="desktop" patternUnits="userSpaceOnUse" width="100%" height="100%">
      <image xlink:href="http://placehold.it/170x93" width="170" height="93" x="6" y="6" />
    </pattern>
    <pattern id="tablet" patternUnits="userSpaceOnUse" width="100%" height="100%">
      <image xlink:href="http://placehold.it/52.83x69.15" width="52.83" height="69.15" x="141.53" y="54" />
    </pattern>
    <pattern id="mobile" patternUnits="userSpaceOnUse" width="100%" height="100%">
      <image xlink:href="http://placehold.it/52.83x69.15" width="22.89" height="35.52" x="123" y="90" />
    </pattern>
  </defs>
  <g>
    <path d="M182 0v105h-73v9.406l9 5.594v2H65.02v-2l8.996-5.594V105H0V0h182zM6 6h170v93H6V6z" stroke="#979797" stroke-width=".1" fill="#FFF" />
    <path d="M6 6h170v93H6z" fill="url(#desktop)" />
  </g>
  <g>
    <path d="M169.685 49.77a.41.41 0 0 1 .405.41.41.41 0 0 1-.405.413h-3.38a.41.41 0 0 1-.405-.412c0-.226.18-.41.405-.41h3.38z" fill="#FFF" />
    <path d="M195.162 46h-54.324c-1.565 0-2.838 1.292-2.838 2.88v80.24c0 1.588 1.273 2.88 2.838 2.88h54.324c1.565 0 2.838-1.292 2.838-2.88V48.88c0-1.588-1.273-2.88-2.838-2.88zm-25.472 3.772a.41.41 0 0 1 .405.41.41.41 0 0 1-.405.413h-3.38a.41.41 0 0 1-.404-.412c0-.227.18-.41.405-.41h3.38zM168 129.874c-1.194 0-2.162-.982-2.162-2.195 0-1.213.968-2.195 2.162-2.195s2.162.982 2.162 2.194-.968 2.194-2.162 2.194zm26.35-6.72H141.53v-69.13h52.823v69.13z"
    stroke="#979797" stroke-width=".1" fill="#FFF" />
    <path d="M141.53 54h52.83v69.15h-52.83z" fill="url(#tablet)" />
  </g>
  <g transform="translate(123 90)">
    <rect stroke="#979797" stroke-width=".1" fill="#FFF" x="12.1" y="2.1" width="1.82" height=".5" rx="8" />
    <path d="M24.77 0H1.23C.552 0 0 .72 0 1.608v44.784C0 47.28.552 48 1.23 48h23.54c.678 0 1.23-.72 1.23-1.608V1.608C26 .72 25.448 0 24.77 0zM13 46a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm11.42-6H1.53V4.478h22.89V40zM12.27 2.11h1.466c.097 0 .176.103.176.23 0 .126-.08.23-.176.23H12.27c-.1 0-.178-.104-.178-.23 0-.127.08-.23.177-.23z"
    stroke="#979797" stroke-width=".1" fill="#FFF" />
    <path d="M1.53 4.48h22.89V40H1.53z" fill="url(#mobile)" />
  </g>

</svg>

4

1 回答 1

1

我相信问题在于模式的 x 和 y 属性，

看看这个片段：

<svg viewBox="0 0 198 138" xmlns="http://www.w3.org/2000/svg">
  <!-- <svg width="198" height="138" viewBox="0 0 198 138" xmlns="http://www.w3.org/2000/svg"> -->
  <defs>
    <pattern id="desktop" patternUnits="userSpaceOnUse" width="100%" height="100%">
      <image xlink:href="http://placehold.it/170x93" width="170" height="93" x="6" y="6" />
    </pattern>
    <pattern id="tablet" patternUnits="userSpaceOnUse" width="100%" height="100%">
      <image xlink:href="http://placehold.it/52.83x69.15" width="52.83" height="69.15" x="141.53" y="54" />
    </pattern>
    <pattern id="mobile" patternUnits="userSpaceOnUse" width="100%" height="100%">
      <image xlink:href="http://placehold.it/52.83x69.15" width="22.89" height="35.52" x="2" y="7" /><!--x="123" y="90-->
    </pattern>
  </defs>
  <g>
    <path d="M182 0v105h-73v9.406l9 5.594v2H65.02v-2l8.996-5.594V105H0V0h182zM6 6h170v93H6V6z" stroke="#979797" stroke-width=".1" fill="#FFF" />
    <path d="M6 6h170v93H6z" fill="url(#desktop)" />
  </g>
  <g>
    <path d="M169.685 49.77a.41.41 0 0 1 .405.41.41.41 0 0 1-.405.413h-3.38a.41.41 0 0 1-.405-.412c0-.226.18-.41.405-.41h3.38z" fill="#FFF" />
    <path d="M195.162 46h-54.324c-1.565 0-2.838 1.292-2.838 2.88v80.24c0 1.588 1.273 2.88 2.838 2.88h54.324c1.565 0 2.838-1.292 2.838-2.88V48.88c0-1.588-1.273-2.88-2.838-2.88zm-25.472 3.772a.41.41 0 0 1 .405.41.41.41 0 0 1-.405.413h-3.38a.41.41 0 0 1-.404-.412c0-.227.18-.41.405-.41h3.38zM168 129.874c-1.194 0-2.162-.982-2.162-2.195 0-1.213.968-2.195 2.162-2.195s2.162.982 2.162 2.194-.968 2.194-2.162 2.194zm26.35-6.72H141.53v-69.13h52.823v69.13z"
    stroke="#979797" stroke-width=".1" fill="#FFF" />
    <path d="M141.53 54h52.83v69.15h-52.83z" fill="url(#tablet)" />
  </g>
  <g transform="translate(123 90)">
    <rect stroke="#979797" stroke-width=".1" fill="#FFF" x="12.1" y="2.1" width="1.82" height=".5" rx="8" />
    <path d="M24.77 0H1.23C.552 0 0 .72 0 1.608v44.784C0 47.28.552 48 1.23 48h23.54c.678 0 1.23-.72 1.23-1.608V1.608C26 .72 25.448 0 24.77 0zM13 46a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm11.42-6H1.53V4.478h22.89V40zM12.27 2.11h1.466c.097 0 .176.103.176.23 0 .126-.08.23-.176.23H12.27c-.1 0-.178-.104-.178-.23 0-.127.08-.23.177-.23z"
    stroke="#979797" stroke-width=".1" fill="#FFF" />
    <path d="M1.53 4.48h22.89V40H1.53z" fill="url(#mobile)" />
  </g>

</svg>

于 2015-11-27T21:27:53.683 回答