Question

如何仅转换（旋转）遮罩路径而不是背景图像（图像填充）？

现在我得到了这个（图像与svg变换一起旋转）：

我的SVG如下：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full">
    <title>Text Pattern Fill Example</title>
    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
            <image xlink:href="https://image.shutterstock.com/z/stock-photo-diverse-ethnic-diversity-ethnicity-community-concept-416173357.jpg" x="0" y="0" width="100" height="170"/><!-- Image from http://silviahartmann.com/background-tile/6-grass-meadow-tile.php-->
        </pattern>
    </defs>

        <path d="M59.2078786,111.129597 C101.335439,132.142715 115.952158,85.5158857 115.952158,53.9197716 C115.952158,22.3236576 102.07475,5.17108475 70.7357496,5.17108475 C39.3967496,5.17108475 13.4042112,19.8971044 -0.939389391,40.9853457 C-15.28299,62.0735871 17.0803178,90.1164792 59.2078786,111.129597 Z"  transform="translate(55.780723, 60.780723) rotate(-90.000000) translate(-55.780723, -60.780723) " fill="url(#img1)"></path>        
</svg>

Answer 1

您可以在另一个方向上将<image>旋转相同的数量。

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full">
    <title>Text Pattern Fill Example</title>
    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
            <image xlink:href="https://image.shutterstock.com/z/stock-photo-diverse-ethnic-diversity-ethnicity-community-concept-416173357.jpg" x="0" y="0" width="100" height="170"
             transform="translate(55.780723, 60.780723) rotate(90.000000) translate(-55.780723, -60.780723)"
             /><!-- Image from http://silviahartmann.com/background-tile/6-grass-meadow-tile.php-->
        </pattern>
    </defs>

        <path d="M59.2078786,111.129597 C101.335439,132.142715 115.952158,85.5158857 115.952158,53.9197716 C115.952158,22.3236576 102.07475,5.17108475 70.7357496,5.17108475 C39.3967496,5.17108475 13.4042112,19.8971044 -0.939389391,40.9853457 C-15.28299,62.0735871 17.0803178,90.1164792 59.2078786,111.129597 Z"  transform="translate(55.780723, 60.780723) rotate(-90.000000) translate(-55.780723, -60.780723) " fill="url(#img1)"></path>        
</svg>

但您可能会发现更改屏蔽方式更容易。请勿使用<pattern>，而是将<mask>应用于<image>。

Answer 2

你可以将rotate和translate结合成1（它会跑得很快）：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full">
    <title>Text Pattern Fill Example</title>
    <defs>
        <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
            <image xlink:href="https://image.shutterstock.com/z/stock-photo-diverse-ethnic-diversity-ethnicity-community-concept-416173357.jpg" x="0" y="0" width="100" height="170"
             transform="rotate(90.000000, 55.780723, 60.780723)"
             /><!-- Image from http://silviahartmann.com/background-tile/6-grass-meadow-tile.php-->
        </pattern>
    </defs>

        <path d="M59.2078786,111.129597 C101.335439,132.142715 115.952158,85.5158857 115.952158,53.9197716 C115.952158,22.3236576 102.07475,5.17108475 70.7357496,5.17108475 C39.3967496,5.17108475 13.4042112,19.8971044 -0.939389391,40.9853457 C-15.28299,62.0735871 17.0803178,90.1164792 59.2078786,111.129597 Z"  transform="rotate(-90.000000, 55.780723, 60.780723) " fill="url(#img1)"></path>        
</svg>

SVG变换 - ＆gt;仅旋转蒙版不填充网址图像

2 个答案: