У меня проблемы с отображением моего изображения в качестве источника URL, проблема в том, что он не будет отображаться в моем svg <mask> при использовании в качестве <image x="0" y="0" height="350" width="350" attr.xlink:href="URL"> Я знаю, что это должно работать, потому что когда я помещаютег где-либо еще в svg он показывает, но поскольку я хочу его в <mask>, мне нужно найти способ добиться успеха.когда я открываю изображение в файле блокнота и копирую данные в тег <mask>, оно работает отлично, но поскольку мне нужно <image> для изменения при изменении URL, я не могу жестко закодировать его в <mask>
поэтому решение, которое я задумал, состояло в том, чтобы преобразовать <image> в строку для получения данных и поместить их в переменную, которую я могу поместить в маску.Но я нигде не могу найти, как мне это преобразовать, если это вообще возможно.я хочу преобразовать этот элемент моей HTML-страницы
<svg xmlns:attr.xlink="http://www.w3.org/2000/xlink">
<image height="350" width="350" attr.xlink:href="URL"></image>
</svg>
в это, чтобы поместить его в переменную:
<polygon points="135.956,125.591 137.161,130.401 142.109,130.061 137.906,132.693 139.759,137.294 135.956,134.111 132.153,137.294 134.006,132.693 129.803,130.061 134.751,130.401 "/>
<polygon points="205.763,125.24 206.968,130.05 211.915,129.71 207.713,132.343 209.566,136.943 205.763,133.76 201.96,136.943 203.812,132.343 199.61,129.71 204.557,130.05 "/>
<g>
<g>
<path d="M155.837,153.597c0,0,0.126-0.008,0.362-0.022c0.236-0.012,0.582-0.034,1.024-0.034 c0.441-0.003,0.979,0.018,1.591,0.059c0.611,0.037,1.298,0.045,2.05,0.025c0.752-0.022,1.565-0.062,2.42-0.161 c0.852-0.111,1.778-0.246,2.727-0.261c0.948-0.025,1.931-0.039,2.93,0.068c 0.498,0.049,0.989,0.105,1.484,0.129 c0.494,0.027,0.996,0.034,1.493,0.032c1.008,0.01,1.986-0.048,2.979-0.162c0.998-0.109,1.985-0.093,2.929-0.069 c0.477,0.017,0.943,0.039,1.401,0.092c0.453,0.058,0.896,0.114,1.327,0.168c0.854,0.099,1.667,0.138,2.42,0.161 c0.751,0.02,1.439,0.011,2.05-0.025c0.612-0.041,1.15-0.063,1.591-0.059c0.441,0,0.788,0.022,1.024,0.034 c0.236,0.014,0.362,0.022,0.362,0.022s-0.504,0.028-1.381,0.124 c-0.439,0.045-0.967,0.131-1.579,0.225 c-0.612,0.095-1.307,0.17-2.065,0.199c-0.756,0.035-1.579,0.056-2.451-0.006c-0.872-0.067-1.767-0.145-2.703-0.138 c-0.941-0.001-1.905,0.037-2.883,0.144c-0.981,0.124-2.014,0.198-3.018,0.195c-0.509-0.004-1.014-0.016-1.521-0.049 c-0.506-0.03-1.011-0.093-1.501-0.147c-0.977-0.108-1.944-0.145-2.882-0.144 c-0.939-0.006-1.832,0.069-2.704,0.138 c-0.872,0.062-1.695,0.04-2.451,0.006c-0.757-0.029-1.453-0.104-2.064-0.199c-0.611-0.093-1.14-0.179-1.579-0.224 C156.341,153.625,155.837,153.597,155.837,153.597z"/>
</g>
</g>
есть ли способ сделать этов JavaScript / машинописьили я должен попробовать другой способ.Я использую Angular в этом проекте
EDIT
Я пытаюсь так, потому что я не знаю, что делать, чтобы исправить мою проблему в моем угловом приложении.
Я пытаюсь показать дизайн на производственном изображении для интернет-магазина, дизайн состоит из текстовых элементов, которые могут настраивать пользователи, и в большинстве случаев логотип svg некоторых видов.Поскольку дизайны в основном состоят из разных цветов, я работаю с маскировкой, чтобы убедиться, что отображается правильный дизайн.Проблема в том, что логотип не отображается, но текст есть, и когда я вставляю необработанные данные в маску, он работает только с тегом внутри маски, это не так.поэтому я пытаюсь получить необработанные данные из тега изображения, который я теперь спрятал в верхней части моей HTML-страницы